最近碰到一个需求需要,把页面直接转为文件,最后决定把页面转为pdf最为合适。
该实现主要利用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;
}