手机建网站教程,无锡网站建设人员,华东民航机场建设公司网站,祁阳网页设计基于rust-wasm前端页面转pdf组件和示例 朔源多余的废话花哨的吹牛那点东西要不要拿来试试事到如今 做个美梦 我觉得本文的意义在于,wasm扩展了浏览器的边界,但是又担心如同java的web applet水土不服. 如同我至今看不出塞班和iOS的不同下载地址#xff1a;在github的备份
朔源… 基于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是纯前端的代码,htmlwasm完成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 blobpdfwasmBindings.png2pdf()let fnlocalStorage.getItem(pdfname).pdfdocument.getElementById(theifm).srcblobpdflet link document.getElementById(downlink)link.href blobpdflet arrfn.split(/)fn arr[arr.length-1]link.downloadfnlink.textfn下载// link.click()}trunk这样初始化wasm script typemodule nonceu5yI1HDYG90lcDoY328TfQ
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
htmlstyle#main {padding-top: 20px; padding-bottom: 10px; /* Required padding for .navbar-fixed-top */}/styleheadscript typetext/javascript src/js/jquery.min.js/scriptscript typetext/javascript src/js/dom-to-image.min.js/scriptscript typetext/javascript charsetutf-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 idmain aligncenter /div
/html
效果图
事到如今 做个美梦
其实要是拿塞班聊天上网刷抖音也还行. 就如同今天拿wasm来写出一个pdf文件. 展望未来,wasm可能使浏览器,更具有AI小模型功能.在本地就能提供很⏲的,瞬时的拼写错误提醒,比方我说美化排版,查找错误.wasm可以瞬时完成.然后呢? 它不会泄露隐私,可以只存放于本地.还能使用很多加密方式.网络协议方式. 就像我不知道的ios一样吧.
