高效处理报表，掌握原生JS打印和导出报表为PDF的顺畅技巧！

技术分享 3年前 (2023-06-21) 0 999+

摘要：本文由葡萄城技术团队于博客园原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

前言篇

在日常工作中，报表打印和导出为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>