基于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=blobpdf
let link= document.getElementById('downlink')
link.href= blobpdf
let arr=fn.split('/')
fn =arr[arr.length-1]
link.download=fn
link.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一样吧.
