摘要：本文由葡萄城技术团队于思否原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。
前言篇
在日常工作中，报表打印和导出为 PDF 是常常要解决的工作之一。除了不便咱们将信息传播给共事和客户外，还能够让工作看起来更加业余、丑陋和标准，从而博得领导和客户的信赖和反对。作为一名工作者，把握高效的报表解决技巧对进步工作效率至关重要。其中，原生 JS 打印和导出报表为 PDF 技巧是一种十分实用、高效且广泛应用的形式。应用原生 JS 技巧，能够轻松实现报表解决的工作，防止应用繁琐的第三方库和软件，从而节省时间和金钱。把握原生 JS 打印和导出报表为 PDF 技巧并不需要很高的前端开发技能，只需一些 JS 根底和 DOM 操作根底。本文将向您介绍如何应用原生 JS 技巧打印和导出报表为 PDF，并帮忙解决在解决报表时可能遇到的问题和艰难。
本文应用软件 Visual Studio Code(以下简称“VSCode”) 作为编程环境，请您以管理员身份运行它。
本文目录：
1.Demo 介绍篇
2. 代码篇：
2.1 创立工程文件
2.2 编写 JS 文件
2.3 编写 CSS 文件
2.4 编写 Html 文件
2.5 运行代码
3. 更多资源篇
3.1 残缺代码资源
3.2 更多表格插件 Demo
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 性能，不仅如此，还可实现许多花色操作，如数据绑定和单元格透视等，让表格更具交互性和易用性。