html2canvas + jsPdf 实现导出pdf(及部分问题解决方案) |
您所在的位置：网站首页 › md文件导出的pdf文件有问题 › html2canvas + jsPdf 实现导出pdf(及部分问题解决方案) |
html2canvas + jsPdf 实现导出pdf(及部分问题解决方案)
|
再做项目中遇到了需要导出pdf的功能,遇到很多问题包括html2canvas截屏不全,jsPdf导出文字图片不展示-内容错位-背景黑色-jsPdf超过一页被分割等问题,就是把我的解决方案写在这给大家点思路和便利。 1.html2canvas和jsPdf简单介绍 一.html2canvashtml2canvas官网 npm引入方式 npm insatll --save html2canvas 方式 html2canvas.min.js html2canvas.js 点击前面两个超链接复制保存 使用方式 html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) }); //原理大概是通过入参的绑定元素 复制一个相同的canvas
下图为html2canvas的第二个参数options
jsPdf官网 官网首页有个案例可用通过下拉框切换 支持的pdf的类型,会展示对应的代码,足够满足简单的使用
一.如果导出pdf的界面不超过一个屏幕的话可以使用,但是pdf.addHtml已经弃用目前还能用(只适用于不超出一页) var w = parseInt(document.getElementById('app').clientWidth); var h = parseInt(document.getElementById('app').clientHeight); var options = { pagesplit: true, background: '#FFFFFF', }; var pdf = new jsPDF('', 'pt', 'a4'); pdf.addHTML(document.getElementById('app'),options, function(){ pdf.save(_this.time2+'诊断报告.pdf'); })二.当导出界面超过一个屏幕时,改变pdf高度使能展示下,宽度按a4纸,高度导出元素的高度加20预留空白 new jsPDF生成对象 addImage 添加canvas 元素 save 导出pdf var canvas = document.createElement("canvas"); var w = parseInt(document.getElementById('app').clientWidth); var h = parseInt(document.getElementById('app').clientHeight); canvas.width = w; canvas.height = h; canvas.style.width = w + "px"; canvas.style.height = h + "px"; canvas.style.background = '#ffffff'; html2canvas(document.getElementById('app'), { canvas: canvas,background:"#ffffff" }).then(function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; var position = 0; var imgWidth = 595.28; var imgHeight = 592.28/contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', [imgWidth, imgHeight+20]); pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) pdf.save(_this.time2+'诊断报告.pdf'); _this.outshow = true; });三.原理和2一样只不过将超出部分用定位添加到新添加的pdf界面中 var canvas = document.createElement("canvas"); var w = parseInt(document.getElementById('app').clientWidth); var h = parseInt(document.getElementById('app').clientHeight); canvas.width = w; canvas.height = h; canvas.style.width = w + "px"; canvas.style.height = h + "px"; canvas.style.background = '#ffffff'; html2canvas(document.getElementById('app'), { canvas: canvas,background:"#ffffff" }).then(function(canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; var position = 0; var imgWidth = 595.28; var imgHeight = 592.28/contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', a4); var pageHeight = contentWidth / 592.28 * 841.89; var leftHeight = contentHeight; var pdf = new jsPDF('', 'pt', 'a4'); while(leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 840; if(leftHeight > 0 && imgHeight > 841.89) { pdf.addPage(); } } pdf.save(_this.time2+'诊断报告.pdf'); _this.outshow = true; });
|
【本文地址】
今日新闻 |
推荐新闻 |