html 导出为 PDF：因页面内有横向滚动条而显示不全的解决方案

• 在 Vue 中，将 html 内容导出为 PDF

---

为了使横向滚动条的内容全部展示，需要指定 width: document.getElementById(id).scrollWidth。

<div ref="myContainer">
  <!-- 我是需要导出的内容 -->
</div>

// 生成pdf
getPDF() {
  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-parens
    let 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-parens
    let 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,支持分页及滚动条的内容