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 版，更多说明都在以下源码内了，多余的废话就不写了：

	
	
	
	
		
		
	


	

		

			

				

					

						
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 页：

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

下载的含中文且有矢量数据的 pdf 文件：

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

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

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

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

---

完整源码下载：

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

---

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