前端生成pdf的效果不如后端生成的效果好，但也可以生成。

本文主要使用 jspdf+html2Canvas 实现html转pdf。 jspdf不支持中文 ，所以需要配合html2Canvas，先生成图片再转为pdf，就不用考虑中英文问题，但是会存在 分页 和 样式不友好 的问题

一、前期准备

image

1、安装jspdf: npm install jspdf --save

2、安装html2Canvas: npm install --save html2canvas

二、代码

1. html

这里使用 iframe 嵌套需要转成pdf的html文件；

如果pdf内容是动态的，可以将html丢给后端，让后端使用freemarker ftl模板语言或是啥其他的模板语言更改即可，然后将整个html作为字符串传给前端，前端再使用iframe 的 srcdoc属性将内容渲染出来。

image

2. 生成单页

不存在分页内容裂开的情况，但对样式呈现不太友好，有时会出现内容偏移情况，时好时坏的，经过不断的尝试，发生偏移的时候，可以将html2Canvas的width写死，但是值具体是多少，需要你自己猜

// 单页pdf：css高度自适应即可（此处用的一个css，为了实现多页pdf同时不让分页分割图片，css中写死了每页的高度.a4page）
    getOnePdf() {
      var title = "单页报告";
      var dom = document.getElementById("pdf-container");  // 生成pdf的html内容
      html2Canvas(dom, {
        allowTaint: true,
        scrollY: 0,
        scrollX: 0,
        useCORS: true, // 开启跨院
        width: 1000, // 这个宽度，太扯淡了，固定1000，防止偏移！
        height: dom.offsetHeight
      }).then(function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        var pdfWidth = (contentWidth + 10) / 2 * 0.75;
        var pdfHeight = (contentHeight + 200) / 2 * 0.75; // 500为底部留白
        var imgWidth = pdfWidth;
        var imgHeight = contentHeight / 2 * 0.75; //内容图片这里不需要留白的距离
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new JsPDF("", "pt", [pdfWidth, pdfHeight]);
        pdf.addImage(pageData, "jpeg", 0, 0, imgWidth, imgHeight);
        pdf.save(title + ".pdf");
    },

image

3. 生成多页

分页会出现问题：比如图片裂开，表格的某一行从中间断开了等等....我用的笨方法手动去调整iframe的宽、高+html2Canvas的width、height+contentWidth、contentHeight，一点点试出来合适的值（应该有更好的方法，但是技术有限）

// 多页pdf-转换后的样式需要手动调整iframe的宽、高+html2Canvas的width、height+contentWidth、contentHeight
    getManyPdf() {
      let _this = this;
      var dom = document.getElementById("pdf-container"); // 生成pdf的html内容
      html2Canvas(dom, {
        allowTaint: true,
        scrollY: 0,
        scrollX: 0,
        useCORS: true, // 开启跨院
        width: 1000, // 这个宽度，太扯淡了，固定1000，防止偏移！
        height: dom.offsetHeight
      }).then(function(canvas) {
        var contentWidth = 900; // 宽高写死，强制分页
        var contentHeight = 5060;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = 3400; // 为了分页，所以写死。592.28 / contentWidth * contentHeight会导致图片被分割
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new JsPDF("", "pt", "a4");
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
        } else {
          while (leftHeight > 0) {
            //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
            pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            //避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage();
        pdf.save(`多页报告}.pdf`);
    }

三、所有代码

  <div class="home-index-container" style="width: 100%; height: 100%; overflow: auto">
    <el-button @click="getOnePdf" type="primary">下载单页</el-button>
    <el-button @click="getManyPdf" type="primary">下载多页</el-button>
    <!-- 转Pdf的容器 -->
    <div id="pdf-container">
      <iframe src="/exportPDF/exportPDF.html" width="1000" height="5200"></iframe>
</template>
<script>
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
  data() {
    return {};
  methods: {
    // 单页pdf：css高度自适应即可（此处用的一个css，为了实现多页pdf同时不让分页分割图片，css中写死了每页的高度.a4page）
    getOnePdf() {
      var title = "单页报告";
      var dom = document.getElementById("pdf-container");  // 生成pdf的html内容
      html2Canvas(dom, {
        allowTaint: true,
        scrollY: 0,
        scrollX: 0,
        useCORS: true, // 开启跨院
        width: 1000, // 这个宽度，太扯淡了，固定1000，防止偏移！
        height: dom.offsetHeight
      }).then(function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        var pdfWidth = (contentWidth + 10) / 2 * 0.75;
        var pdfHeight = (contentHeight + 200) / 2 * 0.75; // 500为底部留白
        var imgWidth = pdfWidth;
        var imgHeight = contentHeight / 2 * 0.75; //内容图片这里不需要留白的距离
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new JsPDF("", "pt", [pdfWidth, pdfHeight]);
        pdf.addImage(pageData, "jpeg", 0, 0, imgWidth, imgHeight);
        pdf.save(title + ".pdf");
    // 多页pdf-转换后的样式需要手动调整iframe的宽、高+html2Canvas的width、height+contentWidth、contentHeight
    getManyPdf() {
      let _this = this;
      var dom = document.getElementById("pdf-container"); // 生成pdf的html内容
      html2Canvas(dom, {
        allowTaint: true,
        scrollY: 0,
        scrollX: 0,
        useCORS: true, // 开启跨院
        width: 1000, // 这个宽度，太扯淡了，固定1000，防止偏移！
        height: dom.offsetHeight
      }).then(function(canvas) {
        var contentWidth = 900; // 宽高写死，强制分页
        var contentHeight = 5060;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = 3400; // 为了分页，所以写死。592.28 / contentWidth * contentHeight会导致图片被分割
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new JsPDF("", "pt", "a4");
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
        } else {
          while (leftHeight > 0) {
            //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
            pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            //避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage();
        pdf.save(`多页报告}.pdf`);