pdf功能的下载,如果是开发人员的话,相信遇到过这个功能,直接上传到代码中:
使用此方法时,vue需要安装模块。
npminstallhtml2canvasjspdf---- save
downPdf () }
var that=this;
var target=document.getelementbyid (policy-information ); //policy-information是html的id信息
//target.style.back ground=' # fffff ';
HML2canvas(target,{
“imageTimeout': 0、
' scale': 2、
}.Then(canvas={
var contentWidth=canvas.width;
var contentHeight=canvas.height;
//1页面的pdf显示html页面中生成的canvas的高度;
var page height=content width/592.28 * 841.89;
未生成//pdf的html页面的高度
var leftHeight=contentHeight;
//页面偏移量
var position=0;
//a4纸张大小[ 595.28,841.89 ]、html页面中生成的canvas的pdf中图像的宽度和高度
var imgWidth=595.28;
var imgheight=592.28/content width * content height;
var pagedata=canvas.todataurl (' image/JPEG ',1.0 );
var pdf=new jspdf ('、' pt '、' a4 ' );
必须区分html页面的实际高度和生成pdf的页面的高度(841.89 )
//如果内容没有超出pdf页面上显示的范围,则不需要分页
leftheightpageheight (lif ) {
pdf.addimage(pagedata,' JPEG ',0,0,imgWidth,imgHeight ) ) ) ) ) ) ) ) )。
} else {
wile(leftheight0) {
pdf.addimage(pagedata,' JPEG ',0,position,imgWidth,imgHeight ) ) ) ) )。
leftHeight -=pageHeight;
位置-=841.89;
//避免添加空白页
左高度0 {
pdf.addPage (;
}
}
}
varname=' content-' new data (.gettime ) '.pdf ); //定义生成的pdf的文件名
pdf.save(name;
);
(,
上述代码写起来有问题,内容会丢失。
说明我们的项目。 左侧是菜单栏,头部也有菜单栏。 独立的下载功能包含导出左侧数据丢失的部分(左侧菜单的宽度)。
当前的解决方案是在独立下载之前,先缩回左侧的按钮,然后再下载。 在之后的研究中如何处理