高效處理報表，掌握原生JS列印和匯出報表為PDF的順暢技巧！
2023-06-20 09:00:45
摘要：本文由葡萄城技術團隊於部落格園原創並首發。轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
前言篇
在日常工作中，報表列印和匯出為PDF是經常要處理的任務之一。除了方便我們將資訊傳達給同事和客戶外，還可以讓工作看起來更加專業、漂亮和規範，從而贏得領導和客戶的信任和支援。作為一名工作者，掌握高效的報表處理技巧對提高工作效率至關重要。其中，原生JS列印和匯出報表為PDF技巧是一種非常實用、高效且普遍使用的方式。使用原生JS技巧，可以輕鬆完成報表處理的任務，避免使用繁瑣的第三方庫和軟體，從而節省時間和金錢。掌握原生JS列印和匯出報表為PDF技巧並不需要很高的前端開發技能，只需一些JS基礎和DOM操作基礎。本文將向您介紹如何使用原生JS技巧列印和匯出報表為PDF，並幫助解決在處理報表時可能遇到的問題和困難。
本文使用軟體Visual Studio Code(以下簡稱「VSCode」)作為程式設計環境，請您以管理員身份執行它。
本文目錄：
1.Demo介紹篇
下圖是一個簡單的資料包表，並使用餅狀圖展示，右邊兩個按鈕分別是列印報表（Print）和匯出報表為Pdf（Export PDF）。分別點選這兩個按鈕實現報表列印和匯出為Pdf。
(Demo執行介面)
（列印報表）
（列印報表為PDF檔案）
2.程式碼篇
2.1建立工程檔案
第一步在檔案管理器中建立一個空白的資料夾作為工程並用VSCode開啟。
第二步新建三個空白的檔案（html檔案、CSS檔案和JS檔案），名稱可以任意取。
至此已經完成了建立工程檔案，下面介紹JS的編寫。
2.2編寫JS檔案
第一步新增表格中的資料資訊。
function addTableContent (sheet) {
sheet.addSpan(1, 0, 1, 7);
//設定列高
sheet.setRowHeight(1, 40);
sheet.getCell(1, 0).value("Costs").font("28px Times").foreColor("#11114f").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center);、
//合併單元格
sheet.addSpan(2, 0, 1, 7);
sheet.setRowHeight(2, 30);
//獲取指定表單區域中的指定單元格
sheet.getCell(2, 0).value("Family Business").font("18px Times").foreColor("#11114f").backColor("#f5f5f5").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center);
sheet.setColumnWidth(0, 105);
sheet.setRowHeight(3, 35);
sheet.getCell(3, 0).value("Costs Elements").font("Bold 15px Times").foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center);
sheet.setColumnWidth(1, 70);
sheet.getCell(3, 1).value("2018").font("Bold 15px Times").foreColor("#171717").backColor("#dfe9fb").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
sheet.setColumnWidth(2, 70);}
第二步新增餅狀圖。
//新增餅狀圖的方法
function addPieContent(sheet) {
//合併單元格
sheet.addSpan(12, 0, 1, 4);
//獲取指定表單區域中的指定單元格
sheet.getCell(12, 0).value("Total Costs").font("15px Times").foreColor("#11114f").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
sheet.addSpan(13, 0, 9, 4);
//在單元格中指定公式
sheet.setFormula(13, 0, '=PIESPARKLINE(G5:G11,"#dfe9fb","#d1dffa","#9bbaf3","#5c7ee6","#1346a4","#102565", "#ededed")');
}
第三步新增匯出Pdf的方法。
window.onload = function () {
var spread = new spreadNS.Workbook(document.getElementById("ss"));
document.getElementById('savePDF').onclick = function () {
//下載pdf的方法
spread.savePDF(
function (blob) {
//設定下載pdf的檔名
saveAs(blob, 'download.pdf');
},
console.log,
{
title: 'Test Title',
author: 'Test Author',
subject: 'Test Subject',
keywords: 'Test Keywords',
creator: 'test Creator'
});
};
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
var style = new GC.Spread.Sheets.Style();
//設定字型大小
style.font = '15px Times';
sheet.setDefaultStyle(style);
//新增表格內容
addTableContent(sheet);
//新增餅圖
addPieContent(sheet);
var printInfo = sheet.printInfo();
//showBorder是否列印控制元件的外邊框線
printInfo.showBorder(true);
//showGridLine是否列印格線
printInfo.showGridLine(true);
//headerCenter是否列印表頭中心
printInfo.headerCenter("Family Business Costs");
printInfo.headerLeft("&G");
printInfo.footerCenter("&P&N");
}
第四步新增列印報表的方法。
window.onload = function () {
//列印的方法
document.getElementById('btnPrint').onclick = function () {
// used to adjust print range, should set with printInfo (refer custom print for detail)
spread.sheets[0].setText(31, 8, " ");
spread.print();
};
sheet.resumePaint();
};
至此已經完成了JS檔案的引入，下面介紹CSS的編寫。
2.3編寫CSS檔案
第一步新增按鈕的CSS格式。
input {
padding: 8px 14px;
display: block;
}
第二步新增選項容器和表格的CSS格式。
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
第三步新增選項行、範例教學和主體的CSS樣式。
input {
padding: 8px 14px;
display: block;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
至此已經完成了CSS檔案的引入，下面介紹Html檔案的編寫。
2.4編寫Html檔案
第一步引入表格、匯出Pdf和列印報表的資源。
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入SpreadJS相關的CSS,預設會有一個CSSSpreadJS預設提供了7種CSS，可以選擇一個適合當前專案的引入-->
<link rel="stylesheet" type="text/css" href="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- 核心資源，最小依賴資源，只要引入了該資源，元件執行時就能顯示出來 -->
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<!--檔案儲存相關資源-->
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/js/FileSaver.js" type="text/javascript"></script>
<!-- 列印相關資源 -->
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script>
<!--PDF相關資源-->
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js" type="text/javascript"></script>
<!-- 中文資原始檔，元件執行時預設會用英文資源，使用中文資源需要引入並設定 -->
<script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script>
</head>
第二步引入匯出Pdf和列印報表的按鈕
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<p>Click this button to export the Spread component to a PDF file.</p>
<div class="option-row">
<!--匯出Pdf按鈕-->
<input type="button" style="height: 70px;" value="Export PDF" id="savePDF">
<hr>
<!--列印按鈕-->
<input type="button" style="height: 70px;" value="Print" id="btnPrint">
</div>
</div>
</div>
</body>
2.5執行程式碼
在執行前需要下載並安裝一個外掛：Live Server。
(Live Server外掛）
安裝完外掛後需要重啟VSCode軟體，然後在Html檔案中右鍵點選Open With The Live Server(以瀏覽器開啟)便可執行。
3.更多資源篇
3.1完整程式碼資源
https://gitee.com/GrapeCity/spread-js-print-pdf (Gitee)
https://github.com/GrapeCityXA/SpreadJS-printPdf (GitHub)
3.2更多表格外掛Demo
除了JavaScript的使用，還可以在流行的框架如Vue、React中引入列印和匯出Pdf功能，不僅如此，還可實現許多花樣操作，如資料繫結和單元格透視等，讓表格更具互動性和易用性。