通过前端js将页面表格导出为PDF（一）

时间：2024-03-01 13:38:59
  • 　　前言

　　最近工作太忙了，要同时用django重构两个系统，前后端都是我一个人写，前端要设计大量的表单，后端要处理大量的数据，身心俱疲啊！周末都没空，有半个月没有写博客了，今天没心情加班，腾出时间写写这半个月积累的技术经验。

一、导出pdf

　　因为开发的系统是服务于酒店的，需要定期和酒店对账，所以要将表格导出为execl表格，这要求简单，在前端写写js代码就行了；后来又改需求，execl不行，会被人为改动，要导出为pdf，还要每页加上公司的logo和其他乱七八糟的东西；没办法，只能去github上看看有没有好的第三方插件了，还真让我给找到了，这就是本文的男主和女主：jspdf和html2canvas；接下来就让我们运用这两个库导出我们想要的PDF报表。

　　首先当然是下载然后引入这两个js文件了，因为导出pdf的方式是先将我们选择的DOM包含的内容通过html2canvas渲染为canvas image；然后再通过jspdf将canvas导出为pdf；因为是直接通过浏览器完成的，所以有点不是很清晰。

<script src="add/pdf/jquery.js"></script>
<script src="add/pdf/jspdf.debug.js"></script>
<script src="add/pdf/html2canvas.min.js"></script>
<script src="add/pdf/exportpdf.js"></script>

exportpdf.js

// 获取本页表格中最后一行是第几行（对不同高度的表格进行不同的处理）
var last_counts = $(\'.counts:last\').text();

//监听pdf导出按键
$(\'#exportpdf\').click(function () {
    // 将 id 为 contents 的 div 渲染成 canvas
    html2canvas(document.getElementById("contents"), {
        // 渲染完成时调用，获得 canvas
        onrendered: function(canvas) {
            // 从 canvas 提取图片数据
            var imgData = canvas.toDataURL(\'image/jpeg\');
　　　　　　　
　　　　　　 // 因为我要在每页都加上特定的图片，所以要先将图片转化为base64格式（可以参考这个网站：http://tool.css-js.com/base64.html）
            var img1_base = \'~\';
            var img2_base = \'~\';
            var img3_base = \'~\';

            //初始化pdf，设置相应格式（单位为pt,导出a4纸的大小）
            var doc = new jsPDF("p", "pt", "a4");

            //图片的位置和尺寸（图片,left,top,width,high）
            doc.addImage(img1_base, 10, 5, 90, 50);
            doc.addImage(img2_base, 450, 5, 130, 50);

　　　　　　　// 初始导出的页面为270（根据引入的图片和每行表格的高度设置）
            var img_high = 270;
            for (var i=1; i<last_counts; i++) {
　　　　　　　　　// 然后每增加一行加20的高（因为我的表格是分页的，每页最多26行，所以最高为750）
                img_high += 20
            }
            doc.addImage(imgData, 10, 65, 580, img_high);
　　　　　　　// 页尾再加上一个图片
            doc.addImage(img3_base, 450, 780, 120, 40);
            //输出保存命名为bill的pdf
            doc.save(\'bill.pdf\');
        },
　　　　　// 导出的pdf默认背景颜色为黑色，所以要设置颜色为白（根据自己的需求设置）
        background: \'#FFF\'
    })
});

 

相关文章