htmlcanvas+jspdf（打印pdf）

直接上代码 （直接复制即可 ）

1.准备一个文件用来封装功能

下面展示里面的代码

// 页面导出为pdf格式

import html2Canvas from 'html2canvas';

import jsPDF from 'jspdf';

const htmlToPdf = {

    getPdf (title, id) {

        console.log(id);

        // loading = true;

        // console.log(loading);

        console.log(document.querySelector(id));

        html2Canvas(document.querySelector(id), {

            allowTaint: false,

            taintTest: false,

            logging: false,

            useCORS: true,

            dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍

            scale: 4 //按比例增加分辨率

        }).then(canvas => {

            const pdf = new jsPDF('p', 'mm', 'a4'); //A4纸，纵向

            let ctx = canvas.getContext('2d'),

                a4w = 190,

                a4h = 227, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277

                imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度

                renderedHeight = 0;

            while (renderedHeight < canvas.height) {

                const page = document.createElement('canvas');

                console.log(page);

                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(); //如果后面还有内容，添加一个空页

                }

                // delete page;

            }

            //保存文件

            pdf.save(title + '.pdf');

            // loading = false;

            // console.log(loading);

        });

    }

};

export default htmlToPdf;

3. 直接调用即可 

  1.导入

  2.调用方法加入对应的参数

效果展示

注意：htmlcanvas很多样式识别不到 还有如果用了element-table失效的话建议 直接用原生的table trtd写效果还是可以实现的  图片直接在模版里面使用 backgroun-imgage 可能会失效   如果出现白屏 也用了el-dailog 弹框的话 建议将id放在弹框里面而不是外面