首页 > 编程知识 正文

vuejs前端开发实战黑马pdf,vue深入浅出这本书怎么样

时间:2023-05-06 01:12:44 阅读:173957 作者:407

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;

);

(,

上述代码写起来有问题,内容会丢失。

说明我们的项目。 左侧是菜单栏,头部也有菜单栏。 独立的下载功能包含导出左侧数据丢失的部分(左侧菜单的宽度)。

当前的解决方案是在独立下载之前,先缩回左侧的按钮,然后再下载。 在之后的研究中如何处理

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。