前言:
而今大家对“js打印数据”都比较珍视,朋友们都需要了解一些“js打印数据”的相关知识。那么小编在网络上网罗了一些对于“js打印数据””的相关内容,希望看官们能喜欢,我们一起来学习一下吧!在日常工作中,报表打印和导出为PDF是经常要处理的任务之一。除了方便我们将信息传达给同事和客户外,还可以让工作看起来更加专业、漂亮和规范,从而赢得领导和客户的信任和支持。
作为一名工作者,掌握高效的报表处理技巧对提高工作效率至关重要。其中,原生JS打印和导出报表为PDF技巧是一种非常实用、高效且普遍使用的方式。使用原生JS技巧,可以轻松完成报表处理的任务,避免使用繁琐的第三方库和软件,从而节省时间和金钱。掌握原生JS打印和导出报表为PDF技巧并不需要很高的前端开发技能,只需一些JS基础和DOM操作基础。
本文将向您介绍如何使用原生JS技巧打印和导出报表为PDF,并帮助解决在处理报表时可能遇到的问题和困难。
本文使用软件Visual Studio Code(以下简称“VSCode”)作为编程环境,请您以管理员身份运行它。
1.Demo介绍篇
下图是一个简单的数据报表,并使用饼状图展示,右边两个按钮分别是打印报表(Print)和导出报表为Pdf(Export PDF)。分别点击这两个按钮实现报表打印和导出为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=";> <!-- 核心资源,最小依赖资源,只要引入了该资源,组件运行时就能显示出来 --> <script src="; type="text/javascript"></script> <!--文件保存相关资源--> <script src="; type="text/javascript"></script> <!-- 打印相关资源 --> <script src="; type="text/javascript"></script> <!--PDF相关资源--> <script src="; type="text/javascript"></script> <!-- 中文资源文件,组件运行时默认会用英文资源,使用中文资源需要引入并设置 --><script src="; 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。
安装完插件后需要重启VSCode软件,然后在Html文件中右键点击Open With The Live Server(以浏览器打开)便可运行。
除了JavaScript的使用,还可以在流行的框架如Vue、React中引入打印和导出Pdf功能,不仅如此,还可实现许多花样操作,如数据绑定和单元格透视等,让表格更具交互性和易用性。
标签: #js打印数据