一、使用插件
1.html2canvas.js
script引入:
2.jspdf.js
script引入:
二、编写HTML文件
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/html2canvas.js"></script>
<script src="./js/jspdf.js"></script>
<script src="./js/exportpdf.js"></script>
<div>
<span id="download">下载</span>
</div>
<div class="data-table" id="download-table">
<table class="table table-hover">
<thead>
<tr>
<td>项目员</td>
<td>任务分值</td>
<td>日志分值</td>
<td>绩效分值</td>
<td>绩效额度</td>
</tr>
</thead>
</table>
</div>
三、编写js文件
文件名称:exportpdf.js
// 获取本页表格中最后一行是第几行(对不同高度的表格进行不同的处理)
var last_counts = $(\'#down-table:last\').text();
//监听pdf导出按键
$(\'#download\').click(function () {
// 将 id 为 contents 的 div 渲染成 canvas
html2canvas(document.getElementById("download-table"),{
// 渲染完成时调用,获得 canvas
onrendered: function(canvas) {
// 从 canvas 提取图片数据
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 555.28;
var imgHeight = 555.28/contentWidth * contentHeight;
var imgData = canvas.toDataURL(\'image/jpeg\',1.0);
//初始化pdf,设置相应格式(单位为pt,导出a4纸的大小)
var doc = new jsPDF("p", "pt", "a4");
doc.internal.scaleFactor = 1.33;
if (leftHeight < pageHeight) {
doc.addImage(imgData, \'JPEG\', 20, 20, imgWidth, imgHeight );
} else {
while(leftHeight > 0) {
doc.addImage(imgData, \'JPEG\', 20, position, imgWidth, imgHeight)
leftHeight -= pageHeight;
position -= 841.89;
//避免添加空白页
if(leftHeight > 0) {
doc.addPage();
}
}
}
//输出保存命名为bill的pdf
doc.save(\'bill.pdf\');
},
// 导出的pdf默认背景颜色为黑色,所以要设置颜色为白(根据自己的需求设置)
background: \'#FFF\'
})
});