社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
最近接手了一个web项目改造,对弹窗进行导出PDF,而且弹窗可能还会有滚动。
要求原样导出,一开始就没考虑后台导出太傻,JS这么强大。
jsPDF符合要求,官网:https://parall.ax/products/jspdf,有几个sample还可以。
以下是几个主要方法和槽点
addHtml:支持dom的导出PDF,不过分辨率差很多很失真且不支持自动分页只会截取当页显示内容,应该是内部使用html2canvas方法转换图片的坑。
fromHtml:支持长页面的自动分页,不过不支持中文,去jsPdf在github相关issues,有提示说要自己添加字体ttf,
addImage: 添加图片自己定义,最后采用这个
但是div生成图片也有两种方法, html2canvas,domtoimage
html2canvas只转换显示当前也内容,需手动添加页面,对于一个div长页面不太好处理
domtoimage,可以截取超长页面,不过是采用的es6语法,在传统web项目中IE(坑)浏览器不兼容。
以上记录研究历程,下面上主要代码
<script src="${request.getContextPath()}/js/polyfill.js"></script>//可以使用es6语法
<script src="${request.getContextPath()}/js/bluebird.js"></script>//浏览器可以支持promise,ie有报错
<script src="${request.getContextPath()}/js/framework/dom-to-image.js"></script>
<script src="${request.getContextPath()}/js/html2canvas.js"></script>
<script src="${request.getContextPath()}/js/jspdf.debug.js"></script>
主要方法,为了兼容ie,
/*滚动条内容,全部展开,如不展开只截取显示*/
$("#nodeText-frm").css("overflow","visible");
$("#nodeText-frm").css("height","auto");
$("#modal-body").css("position","relative");
var sHeight = $("#nodeText-frm").height();
var print_content = $('#pdf1');
var height = $(print_content).height();
var width = $(print_content).width();
if(height<sHeight){
height = sHeight+20;
$('#pdf1').height(height+20);
}
var node = document.getElementById('pdf1');//必须这样获取dom,采用jquery获取在domtoimage中报错
/*PDF 方向,l横排,p竖排,此处关键,当宽度大于高度采用横排显示,这样可以显示实际大小*/
var orientation = "p";
if(width>height){
orientation = "l";
}
var pdf = new jsPDF(orientation, 'px', [width,height]);
var explorer =navigator.userAgent;//此处略LOW
if(explorer.indexOf("MSIE") >= 0){
html2canvas(node, {
onrendered: function(canvas) {
var url = canvas.toDataURL();//图片地址
pdf.addImage(url, 'PNG', 0, 0,width,height);
pdf.save(filename);//此处有坑,超过一页显示不全
},
width: width,
height: height
});
}else {
domtoimage.toPng(node)
.then(function (dataUrl) {
/*图片下载,还有很多api*/
/*var link = document.createElement('a');
link.download = 'my-image-name.png';
link.href = dataUrl;
link.click();*/
pdf.addImage(dataUrl, 'PNG', 0, 0,width,height);
pdf.save(filename);
});
}
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!