目录
加上字体赋值行，仅需六行代码就可以实现网页元素转为 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 版，更多说明都在以下源码内了，多余的废话就不写了：
<!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><p> 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下载 , 内含转换好的中文字体及字体转换工具
最后，必须鄙视一下百度文库改版后难用的阅读界面，模糊不清，要放大了网页才能看清代码，而且复制都收费，原来版本还可以免费复制少量字节的。