经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
高效处理报表,掌握原生JS打印和导出报表为PDF的顺畅技巧!
来源:cnblogs  作者:葡萄城技术团队  时间:2023/6/21 10:53:04  对本文有异议

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

前言篇

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

第一步添加表格中的数据信息。

  1. function addTableContent (sheet) {
  2. sheet.addSpan(1, 0, 1, 7);
  3. //设置列高
  4. sheet.setRowHeight(1, 40);
  5. sheet.getCell(1, 0).value("Costs").font("28px Times").foreColor("#11114f").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center);、
  6. //合并单元格
  7. sheet.addSpan(2, 0, 1, 7);
  8. sheet.setRowHeight(2, 30);
  9. //获取指定表单区域中的指定单元格
  10. sheet.getCell(2, 0).value("Family Business").font("18px Times").foreColor("#11114f").backColor("#f5f5f5").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center);
  11. sheet.setColumnWidth(0, 105);
  12. sheet.setRowHeight(3, 35);
  13. sheet.getCell(3, 0).value("Costs Elements").font("Bold 15px Times").foreColor("#171717").backColor("#ffffff").hAlign(spreadNS.HorizontalAlign.headerLeft).vAlign(spreadNS.VerticalAlign.center);
  14. sheet.setColumnWidth(1, 70);
  15. sheet.getCell(3, 1).value("2018").font("Bold 15px Times").foreColor("#171717").backColor("#dfe9fb").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
  16. sheet.setColumnWidth(2, 70);}

第二步添加饼状图。

//添加饼状图的方法

  1. function addPieContent(sheet) {
  2. //合并单元格
  3. sheet.addSpan(12, 0, 1, 4);
  4. //获取指定表单区域中的指定单元格
  5. sheet.getCell(12, 0).value("Total Costs").font("15px Times").foreColor("#11114f").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
  6. sheet.addSpan(13, 0, 9, 4);
  7. //在单元格中指定公式
  8. sheet.setFormula(13, 0, '=PIESPARKLINE(G5:G11,"#dfe9fb","#d1dffa","#9bbaf3","#5c7ee6","#1346a4","#102565", "#ededed")');
  9. }

第三步添加导出Pdf的方法。

  1. window.onload = function () {
  2. var spread = new spreadNS.Workbook(document.getElementById("ss"));
  3. document.getElementById('savePDF').onclick = function () {
  4. //下载pdf的方法
  5. spread.savePDF(
  6. function (blob) {
  7. //设置下载pdf的文件名
  8. saveAs(blob, 'download.pdf');
  9. },
  10. console.log,
  11. {
  12. title: 'Test Title',
  13. author: 'Test Author',
  14. subject: 'Test Subject',
  15. keywords: 'Test Keywords',
  16. creator: 'test Creator'
  17. });
  18. };
  19. var sheet = spread.getActiveSheet();
  20. sheet.suspendPaint();
  21. var style = new GC.Spread.Sheets.Style();
  22. //设置字体大小
  23. style.font = '15px Times';
  24. sheet.setDefaultStyle(style);
  25. //添加表格内容
  26. addTableContent(sheet);
  27. //添加饼图
  28. addPieContent(sheet);
  29. var printInfo = sheet.printInfo();
  30. //showBorder是否打印控件的外边框线
  31. printInfo.showBorder(true);
  32. //showGridLine是否打印网格线
  33. printInfo.showGridLine(true);
  34. //headerCenter是否打印表头中心
  35. printInfo.headerCenter("Family Business Costs");
  36. printInfo.headerLeft("&G");
  37. printInfo.footerCenter("&P&N");
  38. }

第四步添加打印报表的方法。

  1. window.onload = function () {
  2. //打印的方法
  3. document.getElementById('btnPrint').onclick = function () {
  4. // used to adjust print range, should set with printInfo (refer custom print for detail)
  5. spread.sheets[0].setText(31, 8, " ");
  6. spread.print();
  7. };
  8. sheet.resumePaint();
  9. };

至此已经完成了JS文件的引入,下面介绍CSS的编写。

2.3编写CSS文件

第一步添加按钮的CSS格式。

  1. input {
  2. padding: 8px 14px;
  3. display: block;
  4. }

第二步添加选项容器和表格的CSS格式。

  1. .sample-spreadsheets {
  2. width: calc(100% - 280px);
  3. height: 100%;
  4. overflow: hidden;
  5. float: left;
  6. }
  7. .options-container {
  8. float: right;
  9. width: 280px;
  10. padding: 12px;
  11. height: 100%;
  12. box-sizing: border-box;
  13. background: #fbfbfb;
  14. overflow: auto;
  15. }

第三步添加选项行、示例教程和主体的CSS样式。

  1. input {
  2. padding: 8px 14px;
  3. display: block;
  4. }
  5. body {
  6. position: absolute;
  7. top: 0;
  8. bottom: 0;
  9. left: 0;
  10. right: 0;
  11. }
  12. .sample-tutorial {
  13. position: relative;
  14. height: 100%;
  15. overflow: hidden;
  16. }

至此已经完成了CSS文件的引入,下面介绍Html文件的编写。

2.4编写Html文件

第一步引入表格、导出Pdf和打印报表的资源。

  1. <head>
  2. <meta name="spreadjs culture" content="zh-cn" />
  3. <meta charset="utf-8" />
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5. <!-- 引入SpreadJS相关的CSS,默认会有一个CSSSpreadJS默认提供了7种CSS,可以选择一个适合当前项目的引入-->
  6. <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">
  7. <!-- 核心资源,最小依赖资源,只要引入了该资源,组件运行时就能显示出来 -->
  8. <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>
  9. <!--文件保存相关资源-->
  10. <script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/js/FileSaver.js" type="text/javascript"></script>
  11. <!-- 打印相关资源 -->
  12. <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>
  13. <!--PDF相关资源-->
  14. <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>
  15. <!-- 中文资源文件,组件运行时默认会用英文资源,使用中文资源需要引入并设置 -->
  16. <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>
  17. </head>

第二步引入导出Pdf和打印报表的按钮

  1. <body>
  2. <div class="sample-tutorial">
  3. <div id="ss" class="sample-spreadsheets"></div>
  4. <div class="options-container">
  5. <p>Click this button to export the Spread component to a PDF file.</p>
  6. <div class="option-row">
  7. <!--导出Pdf按钮-->
  8. <input type="button" style="height: 70px;" value="Export PDF" id="savePDF">
  9. <hr>
  10. <!--打印按钮-->
  11. <input type="button" style="height: 70px;" value="Print" id="btnPrint">
  12. </div>
  13. </div>
  14. </div>
  15. </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功能,不仅如此,还可实现许多花样操作,如数据绑定单元格透视等,让表格更具交互性和易用性。

原文链接:https://www.cnblogs.com/powertoolsteam/p/17486071.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号