当前位置: 首页>后端>正文

jquery导出pdf插件 js 导出pdf

  • 前言

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

一、导出pdf

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

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'
    })
});

 




https://www.xamrdz.com/backend/3vr1921984.html

相关文章: