一、html2canvas+jsPDF（文字會被截斷）：

將HTML元素呈現給添加到PDF中的畫布對象，不能僅使用jsPDF，需要html2canvas或rasterizeHTML

html2canvas+jsPDF的具體使用鏈接

二、html2pdf（內容顯示不全+文字會被截斷）：

下載或者安裝html2pdf：官網

1、將文檔放在本地，用原生js進行引用和使用。

① 新建一個名為 html2pdf.js 的文件，并且將線上的內容進行復制。
② 引入 js 文件：

// js直接引入 -- 未嘗試
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.js"></script>// layui使用
// 首先在html2pdf.js文件中添加exports
layui.define([],function(exports){// 復制的內容...exports('html2pdf',html2pdf);
})
// 其次進行自定義插件的引入
layui.define(['appsmenu'],function (exports) {exports("conf", {// 第三方擴展extend: {// 引入html2pdfhtml2pdf: "lay/extends/html2pdf",}}
})

2、使用 npm 進行安裝使用：

npm install --save html2pdf.js

3、在原生js中使用：

// 點擊下載按鈕
document.getElementById("btn").onclick=function(){let opt = {margin: 1,  // pdf外邊距filename:  'pdf生成'+'.pdf', // 導出的pdf名稱image: { // 圖片的類型和質量，詳情： https://github.com/eKoopmans/html2pdf.js#image-type-and-qualitytype: 'jpeg',quality: 0.98  // 取0-1，默認0.95，僅適用  jpeg/webp},html2canvas: {scale: 1,dpi: 92,},jsPDF: { // 詳情：http://www.rotisedapsales.com/snr/cloud2/website/jsPDF-master/docs/jsPDF.htmlunit: 'pt', // pt、mm、cm、informat: 'a4', orientation: 'portrait' // 縱向p，橫向l}};html2pdf().set(opt).from(document.getElementById('box')).save();
}

4、效果：

三、print.js（內容截斷：包括不限于圖表截斷、動態表格行截斷）：

下載或者安裝PrintJs：官網

1、將文檔放在本地，用原生js進行引用和使用。

① 新建一個名為 print.js 的文件，并且將線上的內容進行復制。
② 引入 js 文件：

// js直接引入 -- 未嘗試
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/print-js/1.6.0/print.js"></script>// layui使用
// 首先在print.js文件中添加exports
layui.define([],function(exports){// 復制的內容...exports('print',print);
})
// 其次進行自定義插件的引入
layui.define(['appsmenu'],function (exports) {exports("conf", {// 第三方擴展extend: {// 引入print-jsprint: "lay/extends/print",}}
})

2、使用 npm 進行安裝使用：

npm install print-js --save

3、原生js使用：

// 點擊下載按鈕
document.getElementById("btn").onclick=function(){printJS({printable: 'box', // 數據源:pdf or image的url，html類型則填打印區域元素id，json類型則是數據object。type: 'html', // 默認pdf，可選類型:pdf, html, image, json// header: '暫時不要標題', // 應用于頁面頂部標題文本。targetStyles: ['*'],scanStyles: false, 	//此屬性默認為true，printJs會自動掃描當前html結構所用的樣式表style: stringCssFunc(), // 打印的內容是沒有css樣式的，此處需要string類型的css樣式
})
}var stringCssFunc = function() {return `@page {margin:0 10mm};body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td,form,pre{margin: 0; padding: 0; -webkit-tap-highlight-color:rgba(0,0,0,0);}a:active,a:hover{outline:0}img{display: inline-block; border: none; vertical-align: middle;}li{list-style:none;}table{border-collapse: collapse; border-spacing: 0;}h1,h2,h3{font-weight: 400;}h4, h5, h6{font-size: 100%; font-weight: 400;}button,input,select,textarea{font-size: 100%; }input,button,textarea,select,optgroup,option{font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0;}pre{white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;}body{line-height: 24px; font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;}hr{height: 1px; margin: 10px 0; border: 0; clear: both;}a{color: #333; text-decoration:none; }a:hover{color: #777;}a cite{font-style: normal; *cursor:pointer;}`
}

四、jsPDF-Autotable（只對表格起作用）：

下載或者安裝jsPDF-Autotable：這個應該是官網，找不到別的了

1、將文檔放在本地，用原生js進行引用和使用。

① 新建一個名為 autotable.js 的文件，并且將線上的內容進行復制。
② 引入 js 文件：

// js直接引入 -- 未嘗試
<script type="text/javascript" src="https://cdn.staticfile.org/jspdf-autotable/3.5.31/jspdf.plugin.autotable.js"></script>// layui使用
// 首先在autotable.js文件中添加exports
layui.define([],function(exports){// 復制的內容...// 將復制的內容引出的default改為autotable，可以看下面的圖片1exports('autotable',autotable);
})
// 其次進行自定義插件的引入
layui.define(['appsmenu'],function (exports) {exports("conf", {// 第三方擴展extend: {// 引入jsPDF-Autotableautotable: "lay/extends/autotable",}}
})

圖片1：

2、使用 npm 進行安裝使用：

npm install jspdf -Snpm install jspdf-autotable -S

3、原生js使用：

// 點擊下載按鈕
document.getElementById("btn").onclick=function(){const doc = new jsPDF()// 當前的dom元素，應該是table元素上面的類名，table里面包含th、tr、td等// 如果使用除了table、th、tr、td之外的元素，那么將會報錯，或者打印的是空白autoTable(doc, { html: '#box' })doc.save('下載的文件.pdf')
}

四、pdfmake（只適用很簡單的頁面結構，沒有什么樣式，嘗試失敗）：

pdfmake默認不支持中文，所以需要安裝字體文件

下載或者安裝pdfmake及字體js：官網

1、將文檔放在本地，用原生js進行引用和使用。

① 新建一個名為 pdfmake.min.js 的文件，并且將線上的內容進行復制。
② 新建一個名為 vsfFonts.js的文件，并且將線上的內容進行復制。
③ 引入 js 文件：

// js直接引入 -- 未嘗試
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

2、使用 npm 進行安裝使用：

npm install pdfmake

3、原生js使用：

// 點擊下載按鈕
document.getElementById("btn").onclick=function(){var docDefinition = { // 描述的對象 -- 內容的結構數組、樣式文件的引入都在這里寫，感覺不適合復雜的頁面結構content: "這里可以使用字符串，也可以使用數組",defaultStyle: {// 設置定義好的字體為默認字體font: "字體名",},};pdfMake.createPdf(docDefinition).download("下載的文件名", () => {console.log("下載完成的回調");})
}

五、pdf-lib(沒看懂)

下載或者安裝pdf-lib：官網

六、PDFKit、Puppeteer、wkhtmltopdf、PhantomJS都是在服務器端調用的。