网站首页没排名但内页有排名,南京推广公司,wordpress 收不到邮件,哪个网站做汽车分期项目开发中遇到了一个变态需求#xff0c;需要把一整个页面导出为pdf格式#xff0c;而且要保留页面上的所有的表格、svg图片和样式。 简而言之#xff0c;就是希望像截图一样#xff0c;把整个页面截下来#xff0c;然后保存成pdf。 咋不上天呢…… 查了一下#xff0c;…项目开发中遇到了一个变态需求需要把一整个页面导出为pdf格式而且要保留页面上的所有的表格、svg图片和样式。 简而言之就是希望像截图一样把整个页面截下来然后保存成pdf。 咋不上天呢…… 查了一下能够实现html转pdf的方法还是挺多的大概有以下几种 1、大部分浏览器就有这个功能。然而我们客户要的可不是这个人家要的是能够在系统中主动触发的导出为pdf功能所以这种方案pass。 2、利用第三方工具。我找到了一种利用wkhtmltopdf这种工具来导出的方案自己在我们的项目中试了一下效果不好而且对svg图片的支持也不行。pass。 3、还有一种是利用iText类后台生成java文件。但因为需要导出的这个页面是动态页面而且直接把页面传给后台会丢失大量样式所以还是pass。 最后没什么好的办法只能退而求其次想着要不先把html页面转成图片再把图片导出为pdf。因为要支持用户导出下载而且要保留样式所以最好是纯js前端实现。 html转canvas的话就用html2canvas这个js这个网上介绍比较多了这里就不废话了。 比较麻烦的是svg图片直接用html2canvas无法把svg标签的内容转成canvas最后查了一圈资料后锁定了canvg这个js。canvg是谷歌的一个插件可以将svg标签内容转成canvas。具体到我们的项目还有一个难点就是如何把glyphicons这种字体图标也转成canvas因为在不同浏览器下对这种字体图标的支持是完全不一样的。最后找到的方法是用char code来替换这些字体图标重新绘制成canvas。由canvas生成图片不用废话。由图片生成pdf用jsPDF实现。 折腾了大半天总算把整个流程打通了接下来一步一步贴上代码。 第一步把对应dom节点里所有的svg元素替换成canvas 1 svg2canvas: function(targetElem) {2 var svgElem targetElem.find(svg);3 svgElem.each(function(index, node) {4 var parentNode node.parentNode;5 //由于现在的IE不支持直接对svg标签node取内容所以需要在当前标签外面套一层div通过外层div的innerHTML属性来获取6 var tempNode document.createElement(div);7 tempNode.appendChild(node);8 var svg tempNode.innerHTML;9 var canvas document.createElement(canvas);
10 //转换
11 canvg(canvas, svg);
12 parentNode.appendChild(canvas);
13 });
14 } 第二步把glyphicons字体转成canvas。如果项目中没有用到glyphicons字体图标可忽略这一步 1 glyphicons2canvas: function(targetElem, fontClassName, fontFamilyName) {2 var iconElems targetElem.find(. fontClassName);3 iconElems.each(function(index, inconNode) {4 var fontSize $(inconNode).css(font-size);5 var iconColor $(inconNode).css(color);6 var styleContent $(inconNode).attr(style);7 //去掉px8 fontSize fontSize.replace(px, );9 var charCode getCharCodeByGlyphiconsName(iconName);
10 var myCanvas document.createElement(canvas);
11 //把canva宽高各增加2是为了显示图标完整
12 myCanvas.width parseInt(fontSize) 2;
13 myCanvas.height parseInt(fontSize) 2;
14 myCanvas.style styleContent;
15 var ctx myCanvas.getContext(2d);
16 //设置绘图内容的颜色
17 ctx.fillStyle iconColor;
18 //设置绘图的字体大小以及font-family的名字
19 ctx.font fontSize px fontFamilyName;
20 ctx.fillText(String.fromCharCode(charCode), 1, parseInt(fontSize) 1);
21 $(inconNode).replaceWith(myCanvas);
22 });
23 }
24 //根据glyphicons/glyphicon图标的类名获取到对应的char code
25 getCharCodeByGlyphiconsName: function(iconName) {
26 switch (iconName) {
27 case(glyphicons-resize-full):
28 return 0xE216;
29 case (glyphicons-chevron-left):
30 return 0xE225;
31 default:
32 return ;
33 }
34 } 第三步html转canvas转图片再转pdf 1 html2canvas($(#myExportArea), {2 onrendered: function(canvas) {3 var imgData canvas.toDataURL(image/jpeg);4 var img new Image();5 img.src imgData;6 //根据图片的尺寸设置pdf的规格要在图片加载成功时执行之所以要*0.225是因为比例问题7 img.onload function() {8 //此处需要注意pdf横置和竖置两个属性需要根据宽高的比例来调整不然会出现显示不完全的问题9 if (this.width this.height) {
10 var doc new jsPDF(l, mm, [this.width * 0.225, this.height * 0.225]);
11 } else {
12 var doc new jsPDF(p, mm, [this.width * 0.225, this.height * 0.225]);
13 }
14 doc.addImage(imgData, jpeg, 0, 0, this.width * 0.225, this.height * 0.225);
15 //根据下载保存成不同的文件名
16 doc.save(report_pdf_ new Date().getTime() .pdf);
17 }
18 },
19 background: #fff,
20 //这里给生成的图片默认背景不然的话如果你的html根节点没设置背景的话会用黑色填充。
21 allowTaint: true //避免一些不识别的图片干扰默认为false遇到不识别的图片干扰则会停止处理html2canvas
22 }); 虽然最后勉强完成了客户的要求但是生成的pdf效果明显不如正常截图来的清晰……水平所限暂时只能想到这种方法如果大家有更好的办法欢迎指点。 一个简单的demohttps://github.com/SuperNaturalGit/HtmlToPdf 使用方法 使用Git克隆项目到本地git clone https://github.com/SuperNaturalGit/HtmlToPdf.git 使用chrome浏览器打开index.html即可。其他浏览器的兼容性没测试。 如果不用git直接把几个文件全部copy到本地只要相对路径没问题也可以运行的。 ps:评论里冷秋月同学对导出流程做了改良可以解决闪烁以及背景的问题大家可以参考。转载于:https://www.cnblogs.com/skyInk/p/6401563.html
