商业网站网址,学历提升专升本,无锡网络科技有限公司,如何做让公众都知道的网站使用插件html2canvas和jspdf插件
下载完两个插件后引入所需要的页面
import html2canvas from html2canvas
import jsPDF from jspdf1、在导出之前将元素的高度或者宽度设置为滚动高度或者宽度#xff0c;如#xff1a;
el.style.height el.scro…使用插件html2canvas和jspdf插件
下载完两个插件后引入所需要的页面
import html2canvas from html2canvas
import jsPDF from jspdf1、在导出之前将元素的高度或者宽度设置为滚动高度或者宽度如
el.style.height el.scrollHeight px;//把要导出的元素高度设置为滚动高度2、转为图片之后再将高度/宽度设回来
//下载完成后改变浏览器界面可视区域高度
el.style.height el.clientHeight px以下导出pdf方法
// 导出页面为PDF格式---使用插件html2canvas和jspdf插件
export function exportPDF(titleName, id) {document.body.scrollTop document.documentElement.scrollTop 0;let el document.querySelector(#my_table_1);var clientH el.clientHeight;el.style.height el.scrollHeight px;//把要导出的元素高度设置为滚动高度html2canvas(el, {allowTaint: true,useCORS: true,dpi: 120, // 图片清晰度问题background: #142D42, //如果指定的div没有设置背景色会默认成黑色,这里是个坑y: 0}).then((canvas) {var currentPage 1;//未生成pdf的html页面高度var leftHeight canvas.height;var a4Width 576;var a4Height 772.89; //A4大小210mm x 297mm四边各保留10mm的边距显示区域190x277//一页pdf显示html页面生成的canvas高度;var a4HeightRef Math.floor((canvas.width / a4Width) * a4Height);//pdf页面偏移var position 0;var pageData canvas.toDataURL(image/jpeg, 1.0);var pdf new jsPDF(p, pt, a4); //A4纸纵向pdf.addFont(simkai-normal.ttf, simkai, normal)pdf.setFont(simkai)pdf.setFontSize(20)var index 1,canvas1 document.createElement(canvas),height;pdf.setDisplayMode(fullwidth, continuous, FullScreen);function createImpl(canvas) {if (leftHeight 0) {index;var checkCount 0;if (leftHeight a4HeightRef) {var i position a4HeightRef;for (i position a4HeightRef; i position; i--) {var isWrite true;for (var j 0; j canvas.width; j) {var c canvas.getContext(2d).getImageData(j, i, 1, 1).data;if (c[0] ! 0xff || c[1] ! 0xff || c[2] ! 0xff) {isWrite false;break;}}if (isWrite) {checkCount;if (checkCount 10) {break;}} else {checkCount 0;}}height Math.round(i - position) || Math.min(leftHeight, a4HeightRef);if (height 0) {height a4HeightRef;}} else {height leftHeight;}canvas1.width canvas.width;canvas1.height height;var ctx canvas1.getContext(2d);ctx.drawImage(canvas,0,position,canvas.width,height,0,0,canvas.width,height);var pageHeight Math.round((a4Width / canvas.width) * height);if (position ! 0) {pdf.addPage();}pdf.addImage(canvas1.toDataURL(image/jpeg, 1.0),JPEG,10,40,a4Width,(a4Width / canvas1.width) * height);leftHeight - height;position height;if (leftHeight 0) {setTimeout(createImpl, 500, canvas);} else {pdf.save(titleName .pdf);//下载完成后改变浏览器界面可视区域高度el.style.height clientH px}}}let targetPage pdf.internal.getNumberOfPages();//当内容未超过pdf一页显示的范围无需分页if (leftHeight a4HeightRef) {pdf.addImage(pageData,JPEG,10,40,a4Width,(a4Width / canvas.width) * leftHeight);pdf.save(titleName .pdf);//下载完成后改变浏览器界面可视区域高度el.style.height clientH px} else {try {pdf.deletePage(0);setTimeout(createImpl, 500, canvas);} catch (err) {}}})
}vue页面使用
//导出pdf------ 数据统计汇总为导出文件名称my_table_1为要导出的dom元素idexportData(){exportPDF(数据统计汇总,my_table_1);},
