前端导出PDF（纯前端功能）

项目场景：

例如：需要导出PDF格式

问题描述

**发现：自己导出的PDF，有表格超出之后，只会截取当前屏幕可视区，下面的并不会导出**

原因分析：

提示：问题出现在滚动条加错地方

解决方案：

首先：

npm install html2canvas

npm install jspdf

第二：新建一个htmlToPdf.js文件存放

// 导出页面为PDF格式

import html2Canvas from './html2canvas'

import JsPDF from './jsPdf.debug'

export default{

name:'wwutils',

toolExportPdf(fileName) {

let isCompeleted = false;

setTimeout(() => {

    // 获取需要打印的区域，以div为单位，此处使用的是vue的选择器

    $("iframe").remove();

    var pdfDom = document.getElementById("exportImg");

    $("#exportImg").scrollTop(0);

    // 设置背景色

    pdfDom.style.background = "#F4F7FC";

    let _this = this;

    var exportName = fileName; // 导出生成文件的名称

    var height = $("#exportImg").outerHeight();

    const Dom_height = $("#exportImg").height();

    const targetDom = document.querySelector("#exportImg");

    const copyDom = targetDom.cloneNode(true);

    copyDom.style.width = targetDom.scrollWidth + "px";

    copyDom.style.height = targetDom.scrollHeight + "px";

    document.body.appendChild(copyDom);

    html2Canvas(pdfDom, {

        allowTaint: false,

        useCORS: true,

        height: targetDom.scrollHeight,

        width: targetDom.scrollWidth,

        onrendered: function (canvas) {

            let contentWidth = canvas.width; //画布宽度

            let contentHeight = canvas.height; //画布高度

            let pageHeight = (contentWidth / 592.28) * 841.89;

            let leftHeight = contentHeight;

            let position = 0;

            let imgWidth = 592.28;

            let imgHeight = (592.28 / contentWidth) * contentHeight;

            let pageData = canvas.toDataURL("image/jpeg", 1.0);

            let PDF = new JsPDF("", "pt", "a4");

            if (leftHeight < pageHeight) {

                PDF.addImage(pageData,"JPEG",0,0,imgWidth,imgHeight);

            } else {

                while (leftHeight > 0) {

                    PDF.addImage(pageData,"JPEG",0,position + 4,imgWidth,imgHeight);

                    leftHeight -= pageHeight;

                    position -= 841.89;

                    if (leftHeight > 0) {

                        PDF.addPage();

                    }

                }

            }

            PDF.save(exportName + ".pdf");

            document.body.removeChild(copyDom);

            isCompeleted = true;

            // PubSub.publish("isExportPdfCompleted", {

            //     state: true,

            // });

        },

        background: "#F4F7FC",

        windowHeight: targetDom.scrollHeight, // 获取y方向滚动条中的内容

        y: targetDom.scrollHeight // 页面在垂直方向的滚动距离

    });

}, 1000);

return isCompeleted

}