标签：canvas vue htmlToPdf let PDF 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。