html转pdf文件下载之最合理的方法支持中文

目录

原始源码出处:

参考资料:

正文:

加上字体赋值行,仅需六行代码就可以实现网页元素转为 PDF 文档。

完整源码下载:


原始源码出处:

https://github.com/parallax/jsPDF  ---->>jsPDF/pdf2.html at master · parallax/jsPDF · GitHub 它原本的花里胡哨的网页例子我就懒得改了,基本是原样使用,只是添加了中文支持,及分页设置。

参考资料:

1. JS案例:将前端页面导出为PDF_web15286201346的博客-CSDN博客_js导出pdf  此类多篇文章探讨的,其实是图片插入 pdf 生成文档的方法,这其实失去了 html 转 pdf 的初衷,因为已经丢失了矢量信息,不管精度再高也只是徒增文件大小,毫无意义,不推荐此类方法。

2. 纯前端生成pdf----js动态获取后台数据生成pdf - 百度文库 

3. 完美解决jspdf各种乱码问题 - 知乎 这个是解决转矢量 pdf 文档时,中文显示问题,但其代码不完整,无法直接使用。

正文:

最近想看看 html 转 pdf 是否可行,查了下,居然有,但是,大多是网页转图片,插入 pdf 的方法,不推荐,于是,由参考资料 1 中,得到 jspdf.js 在 github 的出处,直接去看了下源码,发现,其例子( jsPDF/pdf2.html at master · parallax/jsPDF · GitHub )是不用转图片,可以直接输出矢量 pdf 文档的。

加上字体赋值行,仅需六行代码就可以实现网页元素转为 PDF 文档。

因为我的代码是运行在 IIS 下,所以,jspdf 库选择 UMD 版,更多说明都在以下源码内了,多余的废话就不写了:




	最简单的网页元素转pdf下载例子
	
	
	
		
		
	


	

Heading A4幅面一整页

Text that isn't wrapped in anything.

Followed by some text wrapped in a <p> paragraph.

Maybe add a Parallax or a different style of link with a highlight.

更多版本源代码请访问:parallax/jsPDF


More content 如表格、图片等

姓名出生年月性别
张三2000-1-1

Heading A4幅面第二页

每页高度 841像素.此处因设置了10像素的边框,故需减掉20像素,即高度设为:821px 正好。

本来页面高度应为 29.7/2.54*72=841.88976377952像素,但由于四舍五入及取整的关系,超过841像素就会多出一页,因此页面高度只能设为841像素。

更多版本源代码请访问:parallax/jsPDF


更多内容:如表格、图片等

学历毕业学校毕业时间
博士后家里蹲大学2022-1-1

缩小的网页内容,例子为 2 页:

html转pdf文件下载之最合理的方法支持中文_第1张图片

 打开即自动将网页元素转换为 pdf 文件并自动下载:

下载的含中文且有矢量数据的 pdf 文件:html转pdf文件下载之最合理的方法支持中文_第2张图片

生成并下载的 pdf 文件放大至最大级别,依然清晰:

html转pdf文件下载之最合理的方法支持中文_第3张图片

 只有用 .html 方法输出网页元素才能保存矢量数据, .text 方法虽然也是矢量数据,但是不具备实用价值,其余的绘图画表格等方法感觉也是多此一举,既然可以以所见即所得的方式输出完整网页内容,还用得着那些方法做什么?实在不理解 jspdf 作者的设计初衷。

因为显示中文必须将字体附在网页目录下,第一次访问时会跟 CSS 中设置特定字体那样下载,所以,例子中我选的是一个可用的最小体积的字体,因此部分字符和不常用文字可能不能显示,更换其他字体即可。更换其他字体请看参考资料 3 中的介绍,转换好的字体,我删除了自动生成的代码(html 文件内有代替),只保留了字体赋值那句,其余的都写在 html 里面了。

还有不清楚的请下载以下完整源码测试:


完整源码下载:

html转pdf文件下载之最合理的方法支持中文完整源码-Javascript文档类资源-CSDN下载  , 内含转换好的中文字体及字体转换工具


最后,必须鄙视一下百度文库改版后难用的阅读界面,模糊不清,要放大了网页才能看清代码,而且复制都收费,原来版本还可以免费复制少量字节的。

你可能感兴趣的