html转成pdf 的实践过程以及坑

最新推荐文章于 2023-01-06 04:10:24 发布

weixin_34174322

最新推荐文章于 2023-01-06 04:10:24 发布

阅读量219

点赞数

文章标签： python 前端 ViewUI

原文链接：https://my.oschina.net/hengwangm/blog/1499753

版权

2019独角兽企业重金招聘Python工程师标准>>>

最近碰到一个需求需要，把页面直接转为文件，最后决定把页面转为pdf最为合适。

正好github有这个ng指令https://github.com/hearsid/ng-html-to-pdf-save，于是便直接拿来用。

该实现主要利用html2canvas.js以及jsPDF。前者将dom直接转换为canvas，后者则生成pdf文件，整个流程都在前端完成。

其中碰到的最大的一个坑，便是因为我需要转为的html为一个模态框modal中的页面，但是只有可视化区域才能截图并生产pdf，这样肯定是有问题的。原来是因为position: absolute 和 position:fixed的元素就会有这样的问题存在。因此需要克隆元素，并将克隆的元素position设置为relative，最后在利用document.body.removeChild();清除掉，便可以解决这个问题。

                        //为了确保absolute定位的元素也能购全部截取，而不是只是可视化区域才能截取
    					//所以这里克隆了元素，设为relative定位
    					function hiddenClone(element){
    						  
    						  var clone = element.cloneNode(true);
    						
    						  var style = clone.style;
    						  style.position = 'relative';
    						  style.top = window.innerHeight + 'px';
    						  style.left = 0;
    						  style.width= "900px" ;
    						  style.boxShadow= 'none' ;
    						 
    						  document.body.appendChild(clone);
    						  return clone;
    					}

转载于:https://my.oschina.net/hengwangm/blog/1499753