当前位置：首页 > news >正文

【基于rust-wasm的前端页面转pdf组件和示例】

news 2025/6/18 18:20:10

基于rust-wasm前端页面转pdf组件和示例

朔源
多余的废话
花哨的吹牛
那点东西
要不要拿来试试
事到如今做个美梦

我觉得本文的意义在于,wasm扩展了浏览器的边界,但是又担心如同java的web applet水土不服.

如同我至今看不出塞班和iOS的不同

下载地址：在github的备份

朔源

【Rust在WASM中实现pdf文件的生成】
基于此文,对代码进行了精简,且引入了github,printpdf,0.7以后的开发版,用来解决png在α通道情况下的空白问题,本文将对代码特点和使用集成做一个说明.

多余的废话

本文大致基于2024年最新的技术,rust,trunk,printpdf展示了一个纯传统的功能, web页面转pdf.虽然是png做中间商,差强人意.
在n年前,.net环境,我使用的不熟,还是用wkhtml2pdf这个二进制工具,强行console命令转出页面.格式. 到了现在, vue生成的页面再去转有些变形.后来发现html5的canvos在渲染后可以截屏,很方便,基于这个原理,发现一个项目,domtoimage,已经停止维护3,4年了.在它的帮助下,借由python后台,实现了一款,能用的.
现在相同的功能也在rust的帮助下在wasm中实现了.
编程语言这东西没好的坏的,解决的实际问题,才是一个语言最终的归宿.现实就是不停的出现问题,然后用各种方法去解决它.

花哨的吹牛

wasm相对于后端pdf生成的优势:

不占带宽和服务器资源
兼容多数现代浏览器
后端技术可以更灵活

缺点不方便维护,开发难度有点高,相同的功能,明显有其他可选的方案,生成的文件挺大的8M了.

本wasm生成Pdf的特点:

使用A4布局
会自动等比例扩展到全屏
自动高宽旋转,适应页面布局
html的优势
纯静态页面,html环境使用
也可在vue,react,任意前端集成,通过html跳转,或直接写成可引用的模块.

那点东西

本文的release是纯前端的代码,html+wasm完成png到pdf转换,含有三个文件html,js,wasm.其中html是调用入口,
使用流程如下

调用页面将png的dataurl,存入localStorage,然后window.open转向topdf1.2.html
在topdf1.2.html里加载wasm成功后调用show()函数,在iframe中显示.

其中topdf1.2.html里我这样显示pdf

function showpdf()
{let blobpdf=wasmBindings.png2pdf()let fn=localStorage.getItem('pdfname')+'.pdf'document.getElementById('theifm').src=blobpdflet link=   document.getElementById('downlink')link.href= blobpdflet arr=fn.split('/')fn =arr[arr.length-1]link.download=fnlink.text=fn+"下载"// link.click()}

trunk这样初始化wasm


<script type="module" nonce="u5yI1HDYG90lcDoY328TfQ==">
import init, * as bindings from '/trunk-hello-world-349f5610c9c8b33b.js';
const wasm = await init({ module_or_path: '/trunk-hello-world-349f5610c9c8b33b_bg.wasm' });window.wasmBindings = bindings;showpdf();dispatchEvent(new CustomEvent("TrunkApplicationStarted", {detail: {wasm}}));</script>

要不要拿来试试

借助domtoimage和wasm将现有页面转换pdf的演示:
topdexample.html

<!DOCTYPE html>
<html><style>#main {padding-top: 20px; padding-bottom: 10px; /* Required padding for .navbar-fixed-top */}</style><head><script type="text/javascript" src="/js/jquery.min.js"></script><script type="text/javascript" src="/js/dom-to-image.min.js"></script><script type="text/javascript" charset="utf-8">$().ready(()=>{var node=$("#main") for (var i = 0; i < 30; i++) {// 创建一个新的<p>元素并插入当前文本node.append('<p>第' + i + '段文本</p>');
}domtoimage.toPng(node[0]).then(async function (dataUrl) {window.open(dataUrl,"_blank");localStorage.setItem('imageDataURL', dataUrl);localStorage.setItem('pdfname', '当前模板');window.open('/topdf1.2.html',"_blank");});});    </script>
</head>
<body>
<div   id="main" align='center' >     </div>
</html>

效果图
在这里插入图片描述

事到如今做个美梦

其实要是拿塞班聊天上网刷抖音也还行.
就如同今天拿wasm来写出一个pdf文件.
展望未来,wasm可能使浏览器,更具有AI小模型功能.在本地就能提供很⏲的,瞬时的拼写错误提醒,比方我说美化排版,查找错误.wasm可以瞬时完成.然后呢?
它不会泄露隐私,可以只存放于本地.还能使用很多加密方式.网络协议方式. 就像我不知道的ios一样吧.