手机html转换为pdf,html转换为pdf(示例代码)

将html转换为pdf的工具有两个:phantomjs和wkhtmltopdf,下面分别对两个工具进行介绍。

phantomjs

phantomjs不仅仅只是一个html2pdf的工具,这个是一个Headless WebKit(现在chrome也支持这种模式运行了),可以用来写前端测试等一系列的功能(可惜的是该项目已经停止维护了,项目地址:https://github.com/ariya/phantomjs)。回到主题,phantomjs使用简单,可以自己编写相关测输出脚本,运行的cmd:phantomjs.exe rasterize.js http://www.oschina.net/ test.pdf "A4",可以参考该项目的官方网址:https://phantomjs.org/,比较可惜的是,该项目在window下生成的pdf是很完美的,但是linux下生成的pdf文件就比较糟糕了,主要是dpi惹的祸,直到项目停止维护,该问题都没有解决。为了解决linux下可以完美渲染,在网上查找了很多资料,最终发现phantomjs的pdf生成功能依赖于另一个项目wkhtmltopdf。

wkhtmltopdf

该项目是一个将html转化为pdf的项目,项目地址:https://github.com/wkhtmltopdf/wkhtmltopdf,该工具生成pdf非常简单,cmd:wkhtmltopdf {url} {file} 该工具可以解决linux下生成pdf 的dpi的问题。

需要注意的是,在linux下生成生成pdf很由可能会产生乱码的问题,主要是linux服务器上缺少字体。可以将window的字体copy到linux的/var/share/fonts文件夹下面然后刷新字体。

//copy font

cd /usr/share/fonts/

mkfontscale

mkfontdir

fc-cache

fc-list :lang=zh

准备工作做完后就可以使用工具将html转换为pdf了。

ps:wkhtmltopdf比较坑的是,里面有许多的默认选项是开启的会导致一些无法想象的结果,本人就遇到过--enable-smart-shrinking(默认)导致生成出来的pdf完全走样的问题。wkhtmltopdf相对于高速发展的互联网,一些新的技术都没有很好的支持,制作生成的html页面时,还是使用比较基础的技术,尽量使用支持比较完整的规范,减少后面会踩的坑

ps: chrome也提供了headless模式,该模式下也可以进行pdf的生成,

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在网页中使用 JavaScript 和第三方库,可以将 HTML 转换PDF。这里给出一个使用 jsPDF 库的示例代码: 1. 首先,需要在 HTML 中引入 jsPDF 库: ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> ``` 2. 创建一个按钮或者其他触发事件的元素,在点击时执行转换操作: ```html <button onclick="generatePDF()">生成 PDF</button> ``` 3. 在 JavaScript 中编写生成 PDF 的函数: ```javascript function generatePDF() { // 获取需要转换HTML 元素 const element = document.getElementById("html-to-pdf"); // 创建 jsPDF 实例 const pdf = new jsPDF(); // 将 HTML 转换为 canvas html2canvas(element).then(canvas => { // 将 canvas 转换为图片格式 const imgData = canvas.toDataURL("image/png"); // 将图片插入到 PDFpdf.addImage(imgData, "PNG", 0, 0, pdf.internal.pageSize.width, pdf.internal.pageSize.height); // 保存 PDF 文件 pdf.save("converted.pdf"); }); } ``` 在上面的代码中,`html-to-pdf` 是需要转换PDFHTML 元素的 id。`html2canvas` 库可以将 HTML 元素转换为 canvas 对象,然后使用 `addImage` 将 canvas 中的图片插入到 PDF 中。最后,使用 `save` 方法保存 PDF 文件。 需要注意的是,该方法对于复杂的 HTML 和 CSS 样式可能会存在一些问题,需要根据实际情况进行调试和优化。同时,由于涉及到跨域问题,如果需要转换HTML 中存在跨域资源,可能需要额外的处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值