jQuery匯出excel、pdf檔案檔案及列印頁面
阿新 • • 發佈：2018-12-02
1.匯出excel
由於沒有找到jquery-table2excel外掛線上引用，所以我們需要去官網下載
jquery-table2excel外掛的github地址為： https://github.com/rainabba/jquery-table2excel
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>匯出excel</title> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="js/jquery.table2excel.js"></script> <script> window.onload = function() { $('#button1').click(function() { console.log(1) $("#dataTable").table2excel({ // table2excel外掛的可用配置引數有： exclude: ".noExl",// exclude：不被匯出的表格行的CSS class類。 name: "Excel Document Name",// name：匯出的Excel文件的名稱 filename: "myFileName",// filename：Excel檔案的名稱。 exclude_img: true,// exclude_img：是否匯出圖片。 exclude_links: true,// exclude_links：是否匯出超連結 exclude_inputs: true// exclude_inputs：是否匯出輸入框中的內容 }); }) } </script> </head> <body> <table border="1" id="dataTable"> <tr> <td>學號</td> <td>姓名 </td> </tr> <tr> <td>1001</td> <td>張三</td> </tr> <tr> <td>1002</td> <td>李四</td> </tr> </table> <br> <button class="btn btn-primary btn-lg" data-toggle="modal" id="button1">匯出EXCEL</button> </body> </html>
2.匯出pdf
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>匯出PDF</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script> <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script> <script type="text/javascript"> window.onload = function() { var downPdf = document.getElementById("exportToPdf"); downPdf.onclick = function () { html2canvas( document.getElementById("export_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('content.pdf'); }, //背景設為白色（預設為黑色） background: "#fff" }) } } </script> </head> <body> <button id="exportToPdf">匯出PDF</button> <div id="export_content"> <table id="customers" class="table table-striped table-bordered" border="1"> <thead> <tr class='warning'> <th>學號</th> <th>姓名</th> <th>班級</th> </tr> </thead> <tbody> <tr> <td>1001</td> <td>張三</td> <td>一班</td> </tr> <tr> <td>1002</td> <td>李四</td> <td>二班</td> </tr> <tr> <td>1003</td> <td>王五</td> <td>一班</td> </tr> <tr> <td>1004</td> <td>趙六</td> <td>J三班</td> </tr> </tbody> </table> </div> </body> </html>
3.列印
jquery.jqprint-0.3.js官網下載地址：https://webscripts.softpedia.com/script/Modules/jQuery-Plugins/jqPrint-68448.html
<!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 aa() { $("#ddd").jqprint(); } </script> </head> <body> <div id="ddd"> <table> <tr> <table border="1" id="dataTable"> <tr> <td>學號</td> <td>姓名 </td> </tr> <tr> <td>1001</td> <td>張三</td> </tr> <tr> <td>1002</td> <td>李四</td> </tr> </table> </tr> </table> </div> <input type="button" onclick="aa()" value="列印" /> </body> </html>