版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40348465/article/details/84590164
此处所介绍的是利用一些jQuery插件实现导出pdf文件、导出excel文件和打印的方法。
1.导出pdf文件
(1)需要导入两个文件:jspdf.debug.js,html2canvas.js
<script src="js/jspdf.debug.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/exportPDF.js"></script>
(2)写一个js文件,用于设置一些导出pdf的具体设置。
exportPDF.js
var downPdf = document.getElementById("btn-html2canvas");
downPdf.onclick = function () {
html2canvas(
//打印出content所包含的元素
document.getElementById("content"),
{
dpi: 172,//导出pdf清晰度
onrendered: function (canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//pdf页面偏移
var position = 0;
//html页面生成的canvas在pdf中图片的宽高(a4纸的尺寸[595.28,841.89])
var imgWidth = 595.28;
var imgHeight = 592.28 / contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
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('动态简历.pdf');
},
//背景设为白色(默认为黑色)
background: "#fff"
})
}
2.导出excel
此处利用query.table2excel.js来导出excel
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导出表格</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.table2excel.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$("#btnExport").click(function() {
$("#table_excel").table2excel({
exclude: ".noExl", //过滤位置的 css 类名,不被导出的表格行的CSS class类
filename: "导出excel测试" + ".xls", //导出的excel的文件名称
name: "Excel Document Name.xlsx", //// 导出的Excel文档的名称
exclude_img: true, //是否导出图片。
exclude_links: true, //是否导出超链接
exclude_inputs: true //是否导出输入框中的内容
});
});
});
</script>
</head>
<body>
<div>
<button type="button" id="btnExport" onclick="method5('table_excel')">导出Excel</button>
</div>
<div id="myDiv">
<table id="table_excel" width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5" align="center">HTML表格导出Excel</td>
</tr>
<tr>
<td>书名</td>
<td>作者</td>
<td>出版社</td>
<td>价格</td>
<td>类别</td>
</tr>
<tr>
<td>JAVA编程思想</td>
<td>Bruce Eckel</td>
<td>机械工业出版社</td>
<td>86.9</td>
<td>编程</td>
</tr>
<tr>
<td>JAVA核心技术 卷1</td>
<td>凯 S.霍斯特曼</td>
<td>机械工业出版社</td>
<td>98</td>
<td>编程</td>
</tr>
</table>
</div>
</body>
</html>
3.打印
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打印</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script language="javascript" src="js/jquery.jqprint-0.3.js"></script>
<script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js";></script>
<script language="javascript">
function dayin() {
$("#content").jqprint();
}
</script>
</head>
<body>
<div id="content">
<table>
<tr>
<td>test</td>
</tr>
</table>
</div>
<input type="button" onclick="dayin()" value="打印" />
</body>
</html>