摘要：本文由葡萄城技术团队于思否原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供业余的开发工具、解决方案和服务，赋能开发者。
前言篇
在日常工作中，报表打印和导出为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性能，不仅如此，还可实现许多花色操作，如数据绑定和单元格透视等，让表格更具交互性和易用性。