原始源码出处：

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

<!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="https://parall.ax/">Parallax</a> or a different style of <a href="http://html2canvas.hertzen.com/"style='font-weight: 700; color: purple; font-size: 2em'>link with a highlight</a>.                                </p><p>更多版本源代码请访问：<a href="https://github.com/parallax/jsPDF/" 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="https://github.com/parallax/jsPDF/" 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:本页代码由 https://github.com/parallax/jsPDF/blob/master/examples/html2pdf/pdf2.html 经更改修正所得，可直接运行于前端 ，无需 Node.js。若含图片输出至 pdf 则须运行于 IIS 。仅需 https://html2canvas.hertzen.com/dist/html2canvas.js 、 https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js 和字体文件即可 , 无需 autotable 等多余插件，即可所见即所得原样输出网页对象至 pdf 。*/var width = 600;document.body.style.width = width + "px";//****************引用初始化对象****'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.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的方法支持中文及中文换行可行demo和jar
中文换行修改好后的jar:http://download.csdn.net/download/weixin_36795183/9983888 pdf.JS http://download.csdn.n ...
acrobat给pdf加多行水印_批量pdf如何添加水印多个pdf批量加相同水印的方法|支持同时添加文字、图片水印...
本次还是给大家讲讲pdf文件的编辑转换处理,毕竟pdf文件也是在办公学习上是很常用到的,工作时很经常会遇到多个pdf文件要处理的情况,比如说制作好了一系列的pdf文档,需要上传到网络或者传输给他人查阅 ...
Android开发编码规范pdf文件下载
Android开发编码规范.pdf文件下载 Android开发编码规范.pdf文件下载. 公司要求成立统一的开发流程和编码规范,希望每个人的编码一致,风格一致,这样有利于提高开发效率,于是我从网上整理 ...
JAVA实现 PDF转换常用工具类（html转PDF、PDF添加页码、PDF文件下载、PDF添加印章或者水印）
JAVA实现 PDF转换常用工具类(html转PDF.PDF添加页码.PDF文件下载.PDF添加印章或者水印)可直接使用 package com.bestvike.util; import com. ...
php手册下载打开没有内容,php pdf文件下载：无法加载PDF文档
我想下载使用PHP的PDF文件.我可以下载文本文件,图像和我PHP代码:php pdf文件下载:无法加载PDF文档 header("Content-Type: application/oc ...
手把手教你用Python网络爬虫实现上海证券交易所定期报告pdf文件下载（附代码）...
点击上方"Python爬虫与数据挖掘",进行关注回复"书籍"即可获赠Python从入门到进阶共10本电子书今日鸡汤青山隐隐水迢迢, 秋尽江南草未凋. ...
JS导出PDF插件（支持中文、图片使用路径）
JS导出PDF插件(支持中文.图片使用路径) 原文:JS导出PDF插件(支持中文.图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfma ...
iPhone手机PDF文件转为JPG图片的方法
PDF格式是最近比较流行的一种文件格式,很多时候会遇到PDF文件格式转换为其他文件,那苹果手机给怎么让PDF文件转换为JPG文件呢?不知道的朋友可以看看下面的方法. 1:首先打开手机,在AppStor ...
PDF文件压缩的4个方法，个个高效好用，别错过
推荐4个免费好用的PDF在线压缩工具,打开即用,不需要注册登录,压缩速度快,压缩率高,PDF轻松压缩到2M以内,有的还支持批量压缩! 1.i2PDF 一个完全免费的PDF在线工具,它里面有PDF转换. ...

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

原始源码出处：

参考资料：

正文：

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

完整源码下载：

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

最新文章

热门文章