vue中将页面导出成pdf

1、安装插件：html2canvas、jspdf

//第一个.将页面html转换成图片
 
npm install --save html2canvas
 
//第二个.将图片生成pdf
 
npm install jspdf --save

2、创建  exportToPdf.js 

/**
    path: src/utils/htmlToPdf.js
    name: 导出页面为PDF格式
**/
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'


export function exportToPDF(fileName) {
    var dom2 = document.querySelector('.app-main'); // 生成pdf的html内容
    var dom3 = document.querySelector('.contractFile'); //我的页面附件内容dom
    html2Canvas(dom2, {
        allowTaint: true,
        taintTest: false,
        useCORS: true,
        dpi: window.devicePixelRatio * 4,
        scale: 4,
        useCORS: true, // 开启跨域
        width:dom2.offsetWidth, 
        height: (dom2.offsetHeight / 0.9 + dom3.offsetHeight / 0.8)//截取高度不全，取其0.9 0.8
    }).then(canvas => {
        //内容的宽度
        let contentWidth = canvas.width;
        //内容高度
        let contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度,a4纸的尺寸[595.28,841.89];
        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;
        let imgHeight = 841.89 / contentWidth * contentHeight;
        // let imgHeight = 592.28 / contentWidth * contentHeight;
        //canvas转图片数据
        let pageData = canvas.toDataURL('image/jpeg', 1.0);
        //新建JsPDF对象
        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, imgWidth, imgHeight);
                leftHeight -= pageHeight;
                position -= 841.89;
                if (leftHeight > 0) {
                    PDF.addPage()
                }
            }
        }
        //保存文件
        PDF.save(fileName + '.pdf')

    })
}

3、页面调用

//引入方法
import { exportToPDF } from '@/utils/exportToPdf';

//调用方法
exportToPDF(new Date().getTime() +'测试',);