Javascript实现html转pdf高清版(提高分辨率)
网上一些关于js实现html转pdf的文章大部分最终转成的PDF都不够清晰,今天为大家介绍如何提高js实现html转pdf的清晰度
引入js文件
https://cdn.bootcss.com/jquery/3.4.1/jquery.js
https://cdn.bootcss.com/jspdf/1.5.3/jspdf.min.js
https://cdn.bootcss.com/html2canvas/0.5.0-alpha2/html2canvas.min.js
注意事项:
1.生成的pdf中,dom元素间距异常;
2.提高分辨率后,生成的图片有偏差;
html语句:
...
JS代码:
download(){ varelement=$("#demo");//这个dom元素是要导出pdf的div容器 varw=element.width();//获得该容器的宽 varh=element.height();//获得该容器的高 varoffsetTop=element.offset().top;//获得该容器到文档顶部的距离 varoffsetLeft=element.offset().left;//获得该容器到文档最左的距离 varcanvas=document.createElement("canvas"); varabs=0; varwin_i=$(window).width();//获得当前可视窗口的宽度(不包含滚动条) varwin_o=window.innerWidth;//获得当前窗口的宽度(包含滚动条) if(win_o>win_i){ abs=(win_o-win_i)/2;//获得滚动条长度的一半 } canvas.width=w*2;//将画布宽&&高放大两倍 canvas.height=h*2; varcontext=canvas.getContext("2d"); context.scale(2,2); context.translate(-offsetLeft-abs,-offsetTop); //这里默认横向没有滚动条的情况,因为offset.left(),有无滚动条的时候存在差值,因此 //translate的时候,要把这个差值去掉 html2canvas(element).then(function(canvas){ varcontentWidth=canvas.width; varcontentHeight=canvas.height; //一页pdf显示html页面生成的canvas高度; varpageHeight=contentWidth/592.28*841.89; //未生成pdf的html页面高度 varleftHeight=contentHeight; //页面偏移 varposition=0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 varimgWidth=595.28; varimgHeight=592.28/contentWidth*contentHeight; varpageData=canvas.toDataURL('image/jpeg',1.0); varpdf=newjsPDF('','pt','a4'); //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围,无需分页 if(leftHeight0){ pdf.addImage(pageData,'JPEG',0,position,imgWidth,imgHeight) leftHeight-=pageHeight; position-=841.89; //避免添加空白页 if(leftHeight>0){ pdf.addPage(); } } } pdf.save('我的简历.pdf'); }) }
更多关于Javascript将html转成pdf的文章请大家点击下面的相关链接
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。