首页 > 其他分享 >高效处理报表,掌握原生JS打印和导出报表为PDF的顺畅技巧!

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

时间:2023-06-20 09:02:45浏览次数:51  
标签:文件 sheet 报表 spreadNS 打印 JS PDF

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

前言篇

在日常工作中,报表打印和导出为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功能,不仅如此,还可实现许多花样操作,如数据绑定单元格透视等,让表格更具交互性和易用性。

标签:文件,sheet,报表,spreadNS,打印,JS,PDF
From: https://www.cnblogs.com/powertoolsteam/p/17486071.html

相关文章

  • postgresql json取值为何这么慢?
    一、缘起慢sql分析,总行数80w+,通过监控分析慢SQL,某个查询耗时超1s。比较特殊的是:其中有个字段info是jsonb类型,写法:info::json->'length'aslength同样的查询条件查这个字段和不查这个字段相差3.3倍那看来就是json取值拖垮了查询的性能。取jsonb中的字段有多种取法(如下),那......
  • JSqlParser 解析存储过程
    我现在有一个比较复杂的存储过程,我想要使用这个框架来解析这个存储过程,解析存储过程中用到的表,以及字段等信息,我应该怎么做?要使用JSqlParser解析存储过程并提取其中的表和字段信息,你需要遵循以下步骤:导入JSqlParser库:首先,你需要将JSqlParser库添加到你的Java项目中。你可以在J......
  • 什么是 SAP Commerce Cloud SmartEdit 的 webApplicationInjector.js
    SAPCommerceCloudSmartEdit是SAP提供的一种基于云的电子商务平台,旨在帮助企业轻松管理和优化他们的在线商店。SmartEdit是SAPCommerceCloud的一个功能强大的组件,用于简化网站内容的编辑和管理。通过SmartEdit,商家可以在一个易于使用的界面中轻松地修改和更新网站布局......
  • JVM监控工具jstat使用介绍
    jstat是Java自带的一个命令行工具,用于监控JVM运行时的状态信息。它可以通过以下格式的命令来调用:jstat[option]<vmid>[<interval>[<count>]]其中,option表示需要查询的信息类型,如-gc,-class,-compiler等;vmid表示目标JVM的进程ID或者进程名;interval表示查询......
  • js-audio-recorder 插件实现web端录音
    介绍js-audio-recorder是一个纯js实现的浏览器端录音插件。目前支持以下功能:录音,暂停,恢复,和录音播放。音频数据的压缩,支持单双通道录音。录音时长、录音大小的显示。导出录音文件,格式为pcm或wav。录音波形显示,可自己定制。相关链接GitHub地址官网主页地址项目在线演......
  • js WebUploader 分块上传
    ​ 由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传。拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 拖拽上传区域-->class="dropBox_wrap"><div id="dropbox" class="drop"><h4>请将文件拖拽到此......
  • Turndown 源码分析:五、节点相关`root-node.js`和`node.js`
    importcollapseWhitespacefrom'./collapse-whitespace'importHTMLParserfrom'./html-parser'import{isBlock,isVoid}from'./utilities'//单独构造的根节点,防止输入字符串含有多个根元素exportdefaultfunctionRootNode(input,options){var......
  • 【uniapp框架错误】[ERROR] reportJSException >>>> exception function:createInstance,
    【uniapp框架错误】[ERROR]reportJSException>>>>exceptionfunction:createInstance,exception h5端运行正常,一用基座连接手机端就会报这个错误reportJSException>>>>exceptionfunction:createInstanceContext,exception:whitescreencausecreateinstanceContextfaile......
  • js substr方法截取截断emoji图标问题
    functionsafeSubstring(str,start,length){varend=start+length;varresult="";varemojiFlag=false;for(vari=start;i<end;i++){varcharCode=str.charCodeAt(i);if(charCode>=0xd800&&charCode<=......
  • node.js安装与卸载
    一、安装:官网安装 Node.js(nodejs.org)Node安装C盘与其他盘区别,安装哪个最好!-主要区别在于权限 区别是C盘属于管理员权限,其他盘属于用户权限Node安装C盘时npminstall包cmd以管理员身份运行,必须需要管理员Node安装其他盘时,不是C盘npminstall包需要普通用户权限就可......