【基于rust-wasm的前端页面转pdf组件和示例】
基于rust-wasm前端页面转pdf组件和示例
- 多余的废话
- 花哨的吹牛
- 那点东西
- 要不要拿来试试
- 朔源
我觉得本文的意义在于,wasm扩展了浏览器的边界,但是又担心如同java的web applet水土不服.
如同我至今看不出塞班和iOS的不同
多余的废话
本文大致基于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>效果图
朔源
https://blog.csdn.net/wjcroom/article/details/144171274
【Rust在WASM中实现pdf文件的生成】基于此文,对代码进行了精简,且引入了github,printpdf,0.7以后的开发版,用来解决png,在a通道情况下的失效问题,本文将对代码特点和使用集成做一个 说明.