件html2canvas和jspdf插件

jspdf1、在导出之前将元素的高度或者宽度设置为滚动高度或者宽度如

el.style.height

px;//把要导出的元素高度设置为滚动高度2、转为图片之后再将高度/宽度设回来

el.style.height

导出页面为PDF格式---使用插件html2canvas和jspdf插件

export

document.documentElement.scrollTop

0;let

document.querySelector(#my_table_1);var

clientH

el.clientHeight;el.style.height

el.scrollHeight

px;//把要导出的元素高度设置为滚动高度html2canvas(el,

{allowTaint:

//如果指定的div没有设置背景色会默认成黑色,这里是个坑y:

0}).then((canvas)

297mm四边各保留10mm的边距显示区域190x277//一页pdf显示html页面生成的canvas高度;var

a4HeightRef

//A4纸纵向pdf.addFont(simkai-normal.ttf,

simkai,

normal)pdf.setFont(simkai)pdf.setFontSize(20)var

index

document.createElement(canvas),height;pdf.setDisplayMode(fullwidth,

continuous,

canvas.getContext(2d).getImageData(j,

1).data;if

canvas1.getContext(2d);ctx.drawImage(canvas,0,position,canvas.width,height,0,0,canvas.width,height);var

pageHeight

{pdf.addPage();}pdf.addImage(canvas1.toDataURL(image/jpeg,

1.0),JPEG,10,40,a4Width,(a4Width

canvas1.width)

.pdf);//下载完成后改变浏览器界面可视区域高度el.style.height

clientH

pdf.internal.getNumberOfPages();//当内容未超过pdf一页显示的范围无需分页if

(leftHeight

{pdf.addImage(pageData,JPEG,10,40,a4Width,(a4Width

canvas.width)

.pdf);//下载完成后改变浏览器界面可视区域高度el.style.height

clientH

{pdf.deletePage(0);setTimeout(createImpl,

500,

数据统计汇总为导出文件名称my_table_1为要导出的dom元素idexportData(){exportPDF(数据统计汇总,my_table_1);},