码迷,mamicode.com
首页 > Web开发 > 详细

将HTML页面转换为PDF文件并导出

时间:2020-05-03 20:51:15      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:js等   PDF文件   append   image   页面   管理系   epo   test   else   

目前,在大多数的管理系统中,都会有这样一个功能:根据相关的条件查询相应的数据,并生成可视化报表,然后可导出为PDF文件。本文只展现生成可视化报表之后导出PDF文件的过程,生成可视化的报表可使用Echarts,D3js等框架。

1.需要引入的文件

html2canvas.js(根据实际情况选择相应的版本)
jspdf.min.js(根据实际情况选择相应的版本)

2.实现思路

(1)在body中将需要生成PDF的HTML复制一份,切记:如果元素中含有ID,则必须重新给定
(2)将新的元素设置为position:absolute; 脱离文档流,因为处于文档流中被浏览器遮挡的部分不会生成PDF。
(3)利用html2canvas.js将新的元素生成图片
(4)利用jspdf.min.js将图片生成PDF文件并保存到本地。

3.实现代码

(1)HTML代码
 
/*将要生成PDF的HTML代码*/
<div id="pdf">
………………………………
</div> 

(2)JS代码

/*复制元素,注意ID*/
$("body").append(‘<div id="pdf1">…………………………………………………………</div>‘);
/*设置新元素样式*/
 $("#pdf1").css({
    "background-color": "#fff",
    "position": "absolute",
    "top": "0px",
    "z-index": "-1",
    "height": $("#pdf").height()
});
/*html2canvas生成图片,jspdf生成PDF文件*/
html2canvas($("#pdf1"), {
    background: "#fff",
    allowTaint: true,
    taintTest: false,
    onrendered:function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        var pageHeight = contentWidth / 592.28 * 841.89;
        var leftHeight = contentHeight;
        var position = 0;
        var imgWidth = 595.28;
        var imgHeight = 592.28/contentWidth * contentHeight;
        var pageData = canvas.toDataURL(‘image/jpeg‘, 1.0);
        var img = new Image();
        img.src = pageData;
        var pdf = new jsPDF(‘p‘, ‘pt‘, ‘a4‘);
        img.onload = function() {
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, ‘JPEG‘, 0, 0, imgWidth, imgHeight );
            } else {
                while(leftHeight > 0) {
                    pdf.addImage(pageData, ‘JPEG‘, 0, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    if(leftHeight > 0) {
                        pdf.addPage();
                    }
                }
            }
            pdf.save(‘report_pdf_‘ + new Date().getTime() + ‘.pdf‘);
            $("#pdf1").remove();
        }
    },
})

以上为笔者在项目中的部分核心代码,如有问题,欢迎指正。

将HTML页面转换为PDF文件并导出

标签:js等   PDF文件   append   image   页面   管理系   epo   test   else   

原文地址:https://www.cnblogs.com/10manongit/p/12822987.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!