如何将前端页面PDF导出

第一步在Vue中需要先下载工具

下载命令·

npm install html2canvas jspdf --save

第二步进行全局部署

import htmlToPdf from '@/excel/htmlToPdf'
Vue.use(htmlToPdf)

第三步就可以直接在需要的地方使用了

直接在按钮中调用getPdf()方法

<el-button type="primary" @click="getPdf()">打印</el-button>

但是这个方法有一个不好的地方，就是上边距得空出来80px，才能打印，不然会出现打印不上的，打印的东西需要放在一个div里，取一个id=pdfDom，也不用其他的操作

需要设计上面空白距离，需要在htmlToPdf.js文件设置参数值将对Y轴进行裁切的值改为负值。

html2Canvas(document.querySelector('#pdfDom'), {
    allowTaint: true,
    taintTest: false,
    useCORS: true,
    y:-30, // 对Y轴进行裁切
    // width:1200,
    // height:5000,
    dpi: window.devicePixelRatio * 10, //将分辨率提高到特定的DPI 提高四倍
    scale: 10 //按比例增加分辨率

导出结果如下

这个方法是先将页面转化为图片，在转化为pdf的，所以打印会有非常淡的印记       
如果需要自定义导出文件的名字的话，只需要添加

return {htmlTitle:''}就可以了。