通过前端js将页⾯表格导出为PDF（⼀）  前⾔
  最近⼯作太忙了，要同时⽤django重构两个系统，前后端都是我⼀个⼈写，前端要设计⼤量的表单，后端要处理⼤量的数据，⾝⼼俱疲啊！周末都没空，有半个⽉没有写博客了，今天没⼼情加班，腾出时间写写这半个⽉积累的技术经验。
⼀、导出pdf
  因为开发的系统是服务于酒店的，需要定期和酒店对账，所以要将表格导出为execl表格，这要求简单，在前端写写js代码就⾏了；后来⼜改需求，execl不⾏，会被⼈为改动，要导出为pdf，还要每页加上公司的logo和其他乱七⼋糟的东西；没办法，只能去github上看看有没有好的第三⽅插件了，还真让我给到了，这就是本⽂的男主和⼥主：和；接下来就让我们运⽤这两个库导出我们想要的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
ElementById("contents"), {
// 渲染完成时调⽤，获得 canvas
onrendered: function(canvas) {
/
/ 从 canvas 提取图⽚数据
var imgData = DataURL('image/jpeg');
django前端模板      // 因为我要在每页都加上特定的图⽚，所以要先将图⽚转化为base64格式（可以参考这个⽹站：tool.css-js/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'
})
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。