vue 下载pdf

第一步下载

 

 第二步

创建一个htmlToPdf.js的js文件

// 导出页面为PDF格式 import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default {     install(Vue, options) {         Vue.prototype.getPdf = function () {             // 当下载pdf时，若不在页面顶部会造成PDF样式不对,所以先回到页面顶部再下载             let top = document.getElementById('pdfDom');             if (top != null) {                 top.scrollIntoView();                 top = null;             }             let title = this.exportPDFtitle;             html2Canvas(document.querySelector('#pdfDom'), {                 allowTaint: true             }).then(function (canvas) {                 // 获取canvas画布的宽高                 let contentWidth = canvas.width;                 let contentHeight = canvas.height;                 // 一页pdf显示html页面生成的canvas高度;                 let pageHeight = contentWidth / 841.89 * 592.28;                 // 未生成pdf的html页面高度                 let leftHeight = contentHeight;                 // 页面偏移                 let position = 0;                 // html页面生成的canvas在pdf中图片的宽高（本例为：横向a4纸[841.89,592.28]，纵向需调换尺寸）                 let imgWidth = 841.89;                 let imgHeight = 841.89 / contentWidth * contentHeight;                 let pageData = canvas.toDataURL('image/jpeg', 1.0);                 let PDF = new JsPDF('l', 'pt', 'a4');                 // 两个高度需要区分: 一个是html页面的实际高度，和生成pdf的页面高度                 // 当内容未超过pdf一页显示的范围，无需分页                 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 -= 592.28;                         // 避免添加空白页                         if (leftHeight > 0) {                             PDF.addPage();                         }                     }                 }                 PDF.save(title + '.pdf')             })         }     } }

 

 

 

 

第三步 在 main.js 引入

// main.js
import htmlToPdf from '@/util/htmlToPdf'
Vue.use(htmlToPdf)

 

 

 

第四步 在页面使用

 

标签：canvas,vue,htmlToPdf,let,PDF,pdf,下载,页面
来源： https://www.cnblogs.com/zhangholi/p/16480670.html