在 Vue 中，将 html 内容导出为 PDF
为了使横向滚动条的内容全部展示，需要指定width: document.getElementById(id).scrollWidth。
<div ref="myContainer"><!-- 我是需要导出的内容 --></div>
// 生成pdfgetPDF() {this.generatePDF(this.$refs.myContainer,"我是下载的pdf的名字，随便起啦，也可以用变量");},generatePDF(el, name) {let parent = el.offsetParent;let grandParent = parent.offsetParent;let left = grandParent.offsetLeft + parent.offsetLeft + el.offsetLeft;let top = grandParent.offsetTop + parent.offsetTop + el.offsetTop;html2canvas(el, {x: left,y: top,/// here！！！！！！！ ///width: document.getElementById(id).scrollWidth // 为了使横向滚动条的内容全部展示，这里必须指定！！// 注意id需在html代码中指定。// eg:html某div中指定了‘id="myDiv"’，此处写为‘getElementById("myDiv")’，则pdf以myDiv的宽度为准}).then(canvas => {let contentWidth = canvas.width;let contentHeight = canvas.height;//一页pdf显示html页面生成的canvas高度;// eslint-disable-next-line no-extra-parenslet pageHeight = (contentWidth / 592.28) * 841.89;//未生成pdf的html页面高度let leftHeight = contentHeight;//页面偏移let position = 0;//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高let imgWidth = 595.28;// eslint-disable-next-line no-extra-parenslet imgHeight = (592.28 / contentWidth) * contentHeight;let pageData = canvas.toDataURL("image/jpeg", 1.0);let pdf = new jsPDF("", "pt", "a4");//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)//当内容未超过pdf一页显示的范围，无需分页if (leftHeight < pageHeight) {pdf.addImage(pageData, "JPEG", 5, 30, imgWidth, imgHeight);} else {while (leftHeight > 0) {//arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度pdf.addImage(pageData, "JPEG", 5, position, imgWidth, imgHeight);leftHeight -= pageHeight;position -= 841.89;//避免添加空白页if (leftHeight > 0) {//添加新页pdf.addPage();}}}pdf.save(`${name}.pdf`);});},
如果滚动条不是 html 页面显示，而是组件里自动产生的，则需要以组件的宽度来设置。
我用了 Vue 的<v-data-table>组件，当我的列数很多时，则会自动产生横向滚动条。如果我想让 pdf 中显示表格的全部内容：
// ……generatePDF(el, name) {// ……let tableWidth = document.querySelector("#factTable .v-data-table__wrapper");// factTable 是我在 v-data-table 上指定的 id// v-data-table__wrapper 是组件自动生成的带滚动条的 div 上的 class (需要在浏览器的开发者工具中查找)html2canvas(el, {x: left,y: top,width: tableWidth.scrollWidth}).then(canvas => {// ……})}
参考：
jspdf导出PDF,支持分页及滚动条的内容
