Vue 纯前端导出页面为pdf文件（jsPdf ,附带页面模块转base64图片）

1、引用html2canvas 和 jspdf

npm install --save html2canvas
npm install jspdf --save

2、创建本地文件htmlToPdf.js

import html2canvas from "html2canvas";
import { base64 } from "js-md5";
import { jsPDF } from "jspdf";
export default {
    install(Vue, options) {
        // 转psd ---------------------------------------------------------
        Vue.prototype.getPdf = function(htmlTitle, currentTime) {
            var element = document.getElementById("downPdf");
            html2canvas(element, {
                logging: false
            }).then(function(canvas) {
                var pdf = new jsPDF("p", "mm", "a4"); // A4纸，纵向
                var ctx = canvas.getContext("2d");
                var a4w = 190;
                var a4h = 277; // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
                var imgHeight = Math.floor((a4h * canvas.width) / a4w); // 按A4显示比例换算一页图像的像素高度
                var renderedHeight = 0

                while (renderedHeight < canvas.height) {
                    var page = document.createElement("canvas");
                    page.width = canvas.width;
                    page.height = Math.min(imgHeight, canvas.height - renderedHeight); // 可能内容不足一页

                    // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
                    page
                        .getContext("2d")
                        .putImageData(
                            ctx.getImageData(
                                0,
                                renderedHeight,
                                canvas.width,
                                Math.min(imgHeight, canvas.height - renderedHeight)
                            ),
                            0,
                            0
                        );
                    pdf.addImage(
                        page.toDataURL("image/jpeg", 1.0),
                        "JPEG",
                        10,
                        10,
                        a4w,
                        Math.min(a4h, (a4w * page.height) / page.width)
                    ); // 添加图像到页面，保留10mm边距

                    renderedHeight += imgHeight;
                    if (renderedHeight < canvas.height) {
                        pdf.addPage();
                    } // 如果后面还有内容，添加一个空页
                }

                pdf.save(htmlTitle);
            });
        };
        // 转base64 --------------------------------------------------
        Vue.prototype.getBase64 = function(id) {
            var element = document.getElementById(id);
            html2canvas(element, {
                logging: false
            }).then(canvas => {
                const context = canvas.getContext("2d");

                // 关闭抗锯齿形
                context.mozImageSmoothingEnabled = false;
                context.webkitImageSmoothingEnabled = false;
                context.msImageSmoothingEnabled = false;
                context.imageSmoothingEnabled = false;
                return canvas2Image(canvas, canvas.width, canvas.height, id);
            });

            function canvas2Image(canvas, width, height, id) {
                const retCanvas = document.createElement("canvas");
                const retCtx = retCanvas.getContext("2d");
                retCanvas.width = width;
                retCanvas.height = height;
                retCtx.drawImage(canvas, 0, 0, width, height, 0, 0, width, height);
                const img = document.createElement("img");
                img.src = retCanvas.toDataURL("image/jpeg"); // 可以根据需要更改格式
                // console.log(retCanvas.toDataURL('image/jpeg')) // 查看一下图片的src
                window.sessionStorage.setItem(id, retCanvas.toDataURL("image/jpeg"));
                return retCanvas.toDataURL("image/jpeg");
            }
        };
    }
};

3、直接引用

  

        /*要导出的pdf内容*/
  

 

     
     导出PDF