admin 管理员组

文章数量: 1086895

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

目录

原始源码出处：

参考资料：

正文：

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

完整源码下载：

原始源码出处：

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

<!DOCTYPE html>
<html>
<head><title>最简单的网页元素转pdf下载例子</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style>*{padding:0;margin: 0;}@font-face {font-family: simfang;/* 应和 .addFont 方法字体名一至 */src: url('./simfang.ttf');}div {padding:0px;margin: 0 auto;border: 0px solid black;}.divX{padding:10px;}h1 {border-bottom: 2px solid white;}h2 {background: #efefef;padding: 10px;}#pdfx{border: 0;padding:0;margin: 0;background: red;width:595px;font-family:simfang;/* 应和 .addFont 方法字体名一至 */}.tb1{width:100%;}.tb1 td{border: 1px solid green;text-align:center;}</style><script src="./html2canvas.min.js"></script><script src='./simfang-normal.js'></script>	<script src='./jspdf.umd.min.js'></script>	</head>
<body><div id="pdfx"><div class="divX" style="background: green;width:500px;height:821px;"><div class="divX" style="background: blue; border-color: white;"><div class="divX" style="background: yellow;"><div class="divX" style="background: orange;"><h1>Heading A4幅面一整页</h1>Text that isn't wrapped in anything.<p>Followed by some text wrapped in a <b>&lt;p&gt; paragraph.</b></p><p>Maybe add a <a href="/">Parallax</a> or a different style of <a href="/"style='font-weight: 700; color: purple; font-size: 2em'>link with a	highlight</a>.								</p><p>更多版本源代码请访问：<a href="/" style='font-weight: 700; color: purple; font-size: 2em' id="Parallax"><b>parallax/jsPDF</b></a>。</p><hr /><h2>More content 如表格、图片等</h2><div style="width: 100%; padding: 0;"><table class="tb1"  border="0" cellspacing="0" cellpadding="0"><tr><td>姓名</td><td>出生年月</td><td>性别</td></tr><tr><td>张三</td><td>2000-1-1</td><td>男</td></tr>								</table></div><div style="width:100%; height: 425px; border-width: 1px; padding: 0;"><img src="./jspdf.png" style="width:100%;" /><img src="./jspdf.png" style="width:50%;" /></div></div></div></div></div><div class="divX" style="background: green;width:500px;height:821px;"><div class="divX" style="background: blue; border-color: white;"><div class="divX" style="background: yellow;"><div class="divX" style="background: orange;"><h1>Heading A4幅面第二页</h1><p>每页高度 841像素.此处因设置了10像素的边框，故需减掉20像素，即高度设为：821px 正好。</p><p>本来页面高度应为 29.7/2.54*72=841.88976377952像素，但由于四舍五入及取整的关系，超过841像素就会多出一页，因此页面高度只能设为841像素。</p><p>更多版本源代码请访问：<a href="/" style='font-weight: 700; color: purple; font-size: 2em'><b>parallax/jsPDF</b></a>。</p><hr /><h2>更多内容：如表格、图片等</h2><div style="width: 100%; padding: 0;"><table class="tb1"  border="0" cellspacing="0" cellpadding="0"><tr><td>学历</td><td>毕业学校</td><td>毕业时间</td></tr><tr><td>博士后</td><td>家里蹲大学</td><td>2022-1-1</td></tr>								</table></div><div style="width:100%; height: 425px; border-width: 1px; padding: 0;"><img src="./jspdf.png" style="width:100%;" /><img src="./jspdf.png" style="width:80%;" /></div></div></div></div></div>		</div><script>/* ps:本页代码由 .html 经更改修正所得，可直接运行于前端 ，无需 Node.js。若含图片输出至 pdf 则须运行于 IIS 。仅需 .js 、 .5.1/jspdf.umd.min.js 和字体文件即可 , 无需 autotable 等多余插件，即可所见即所得原样输出网页对象至 pdf 。*/var width = 600;document.body.style.width = width + "px";//****************引用初始化对象****'.5.1/jspdf.umd.min.js'	//const { jsPDF } = window.jspdf;	// 这个写法也可以//jspdf.jsPDF.API.events.push(['addFonts', callAddFont]); //	此位置等效//const {jsPDF} = jspdf;//	此位置等效var jsPDF = jspdf.jsPDF;/* ****************定义添加字体方法一函数 **************var callAddFont = function () {this.addFileToVFS('simfang-normal.ttf', font);this.addFont('simfang-normal.ttf', 'simfang', 'normal');};				jsPDF.API.events.push(['addFonts', callAddFont]); //**********设置 .html 方法可用字体方法 一//console.log(jspdf);*///**********************-定义最终可用对象******	var pdf = new jsPDF('p', 'pt', 'a4');		/* const pdf = new jsPDF({orientation: "p",unit: "pt",format:"a4"});	//等效上一句*/	/*	**********每页对应网页元素大小分析******************************//以 px 为单位（unit: "px"）则 A4 幅面对应元素宽高为:width:430px;height:611px//以 pt 为单位（unit: "pt"）则 A4 幅面对应元素宽高为:width:595px;height:841px ，可容纳的内容更多A4纸的尺寸是210mm*297mm，也就是21.0cm*29.7cm，而1英寸=2.54cm，那么当打印分辨率为72像素/英寸时，我们需要做的图片像素尺寸就是：(21 / 2.54 * 72) * (29.7 / 2.54 * 72)；即：595像素宽，842像素高：高度修正为 841像素*///	**********设置 .html 方法可用字体方法二//var font = "AAAA...."; //此处为 js base64 编码后的字体文件纯文本内容已放置于：simfang-normal.js 便已缓存。 load the *.ttf font file as binary string/* */pdf.addFileToVFS('simfang-normal.ttf', font);// simfang-normal.ttf 为虚拟字体名，和 .addFont 参数 1 一至即可pdf.addFont('simfang-normal.ttf', 'simfang', 'normal');// simfang 为自定义字体名，应和页面中 Css 内设置一至，否则不显示。/*	//**直接设置字体方法仅 .text 方法有效pdf.addFont("./simfang.ttf", "simfang", "normal"); // simfang.ttf 为真实字体文件名及 URL 相对路径pdf.setFont("simfang");// simfang 为自定义字体名和上一句一至即可pdf.setFontSize(40);pdf.text("中文测试!", 100, 100);//最简单的实例，但不具备使用价值pdf.save("A4.pdf");*/		/* 	*/// ** pdf 生成方法一 .html 方法将 pdfx 元素输出为 pdf 文件 "A4.pdf" ，文字为矢量文字，图片直接内嵌源文件，分辨率不受影响，但图片可能会导致生成的 pdf 文件体积较大，推荐方法。pdf.html(document.getElementById('pdfx'), {	// 只有 addFileToVFS 方法添加的字体才能用于 .html 方法callback: function (pdf) {	//pdf.output('datauristring');// 渲染 pdf			pdf.save("A4.pdf");//自动下载}});/*	// ** pdf 生成方法二，截图填入式。分辨率太低且非矢量文字，放弃，不建议使用。var shareContent;shareContent=document.getElementById('pdfx');html2canvas(shareContent).then(function(canvas) {var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");pdf.addImage(imgUri,'png',0,0,595,1682);pdf.addPage();pdf.addImage(imgUri,'png',0,-841,595,1682);pdf.save("A4-2.pdf");//自动下载			});	*///********* 更多用法请自行探索</script>
</body></html>

缩小的网页内容，例子为 2 页：

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

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

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

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

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

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

完整源码下载：

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

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

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

版权声明：本文标题：html转pdf文件下载之最合理的方法支持中文 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687740160a135642.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。