匯出pdf檔案、匯出excel檔案和列印
阿新 • • 發佈：2018-12-02
此處所介紹的是利用一些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>