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

news2024/10/7 18:30:27

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

前言篇

在日常工作中，报表打印和导出为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文件），名称可以任意取。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SE5UAjW5-1686906905871)(media/41a12989c197c14ae142db3603a72973.png)]

至此已经完成了创建工程文件，下面介绍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功能，不仅如此，还可实现许多花样操作，如数据绑定和单元格透视等，让表格更具交互性和易用性。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/665549.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

管理类联考——写作——素材篇——论说文——写作素材02——志篇：毅力·坚持

管理类联考——写作——素材篇——论说文——写作素材02——志篇：毅力·坚持

管理类专业学位联考 (写作能力) 论说文素材 02——志篇&#xff1a;毅力坚持 论文说材料: 骐骥一跃&#xff0c;不能十步&#xff1b;驽马十驾&#xff0c;功在不舍。 ——《荀子劝 学》 一&#xff1a;道理论据 咬住青山不放松&#xff0c;立根原在破岩中&#xff1b;千磨…
阅读更多...
gitLens插件简单使用（默认上传github）

gitLens插件简单使用（默认上传github）

1.安装 在vscode中的插件管理输入如下后下载 GitLens — Git supercharged 2.配置 点击文件--首选项--设置 点击右上角设置小图标 3.github使用 首先仓库文件一定是要git init是git所管理的 1.在代码文件夹下使用git init创建仓库 2.打开vscode的git管理 3.点击添加暂存区…
阅读更多...
如何使用ArcGIS加载天地图

如何使用ArcGIS加载天地图

天地图是自然资源部主管&#xff0c;国家基础地理信息中心负责建设的国家地理信息公共服务平台&#xff0c;于2011年1月18日上线。 有的时候可能需要将在线的天地图加载到ArcGIS内&#xff0c;但是加载方式越来越复杂&#xff0c;很多方法都需要申请key&#xff0c;这里为大家…
阅读更多...
C++基础(3)——类和对象(2)

C++基础(3)——类和对象(2)

前言 本文主要介绍了C中类和对象的基本知识。 4.2.5&#xff1a;深拷贝和浅拷贝 浅拷贝&#xff1a;编译器给我们提供的拷贝函数就是等号复制操作 深拷贝&#xff1a;自己手动重写一个拷贝构造函数&#xff0c;重新new 浅拷贝会出现的问题&#xff1a;如果使用编译器提供的…
阅读更多...
AI是什么？AI工具集网站大全

AI是什么？AI工具集网站大全

AI是什么&#xff1f; AI 是人工智能的缩写&#xff0c;指的是通过计算机技术和算法来实现智能的能力。我们人类的智能是基于我们的大脑所实现的&#xff0c;而 AI 因此也常被称为机器智能。AI技术需要机器能够感知、推理和行动&#xff0c;这些都需要底层算法的支持&#xff…
阅读更多...
2.2C++公有继承与私有继承

2.2C++公有继承与私有继承

C公有继承 C中的公有继承是指一个类可以从另一个类继承公有成员&#xff0c;包括公有成员函数和变量。 公有继承是面向对象编程中最基本的继承方式&#xff0c;它表示父类的公有成员在子类中仍然是公有成员&#xff0c;可以被外部访问。 我写一个 Animal 的基类&#xff0c;…
阅读更多...
哪些公司里面有高性能计算方向cuda方向岗位？

哪些公司里面有高性能计算方向cuda方向岗位？

CUDA可以为高性能计算、科学计算、深度学习和人工智能、图形渲染和游戏开发、并行数据处理等领域提供了强大的并行计算能力和编程模型。它加速了计算任务的执行&#xff0c;推动了科学研究和创新的进程&#xff0c;同时也为开发者提供了更多的工具和资源&#xff0c;促进了开放…
阅读更多...
留个档，Unity Animator state节点的Motion动态替换AnimationClip

留个档，Unity Animator state节点的Motion动态替换AnimationClip

前言 由于Unity没有提供直接替换的API&#xff0c;所以在仅限的API下进行逻辑操作。 替换的原理是差不多的&#xff0c;利用AnimatorOverrideController&#xff0c;进行运行时的覆盖。 网上搜索很多文章是利用 名字字符串作为hash的key来进行替换。不满足我自己项目中的需求…
阅读更多...
【系统开发】尚硅谷 - 谷粒商城项目笔记（五）：分布式缓存

【系统开发】尚硅谷 - 谷粒商城项目笔记（五）：分布式缓存

文章目录 分布式缓存缓存使用场景redis作缓存中间件引入redis依赖配置redis堆外内存溢出 缓存失效问题缓存穿透缓存雪崩缓存击穿 Redisson分布式锁导入依赖redisson配置类可重入锁读写锁缓存一致性解决 缓存-SpringCache简介Cacheable自定义缓存配置CacheEvictCachePut原理与不…
阅读更多...
【网络】协议的定制与Json序列化和反序列化

【网络】协议的定制与Json序列化和反序列化

文章目录 应用层初识TCP协议通讯流程定制协议再谈协议网络版本计算器Protocal.hppCalServerCalClient Json的安装 应用层 我们程序员写的一个个解决我们实际问题, 满足我们日常需求的网络程序, 都是在应用层 初识TCP协议通讯流程 建立链接和断开链接 基于TCP协议&#xff0c…
阅读更多...
六、使用深度学习构建人脸识别模型

六、使用深度学习构建人脸识别模型

本章介绍机器学习中人脸识别的历史以及从零开始如何构建一个人脸识别模型，含所有训练数据，源代码，不强制要求GPU。使用 docker 来管理库依赖项，提供与平台无关的一致环境。使用 Dlib 进行预处理，使用 Tensorflow + Scikit-learn 训练能够根据图像预测身份的分类器。 1、人…
阅读更多...
《吉林省教育学院学报》简介及投稿邮箱

《吉林省教育学院学报》简介及投稿邮箱

《吉林省教育学院学报》简介&#xff1a; 主管单位 吉林省教育厅 主办单位 吉林省教育学院 出版周期&#xff1a;月刊 国际刊号&#xff1a;ISSN&#xff1a;1671-1580&#xff1b;国内刊号&#xff1a;CN&#xff1a;22-1296/G4&#xff1b;邮发代号&#xff1a;12-223 出…
阅读更多...
创建线程三种方法

创建线程三种方法

创建和运行线程 方法一&#xff0c;直接使用 Thread // 创建线程对象 Thread t new Thread() { public void run() {// 要执行的任务} }; // 启动线程 t.start(); 例如&#xff1a; // 构造方法的参数是给线程指定名字&#xff0c;推荐Thread t1 new Thread("t1"…
阅读更多...
Doris的安装

Doris的安装

Doris的安装 文章目录 Doris的安装写在前面Linux 操作系统版本需求软件需求操作系统安装要求设置系统最大打开文件句柄数时钟同步关闭交换分区&#xff08;swap&#xff09; 开发测试环境生产环境 安装下载安装包默认端口集群部署前置准备安装部署FE安装部署BE在 **FE** 中添加…
阅读更多...
2.1C++派生

2.1C++派生

C派生概述 C中的派生允许从一个已有的类中创建一个新的类&#xff0c;该新类继承了原有类的属性和方法。 派生类可以增加新的属性和方法&#xff0c;也可以重写原有类的方法以改变其行为。 C中的派生类可以通过公有、私有和保护继承来继承基类的成员。 公有继承允许派生类访…
阅读更多...
网络协议驱动互联网

网络协议驱动互联网

在分布式系统中&#xff0c;数据通过各种网络协议在网络中传输。作为应用程序开发者&#xff0c;这往往在问题出现之前似乎是一个黑盒子。 在本文中&#xff0c;我们将解释常见网络协议的工作原理&#xff0c;它们在分布式系统中的应用以及我们如何解决常见问题。后续还会介绍一…
阅读更多...
开源一键拥有你自己的ChatGPT+Midjourney网页服务,用不用是另一回事，先收藏！

开源一键拥有你自己的ChatGPT+Midjourney网页服务,用不用是另一回事，先收藏！

功能支持 原ChatGPT-Next-Web所有功能 midjourney imgine 想象 midjourney upscale 放大 midjourney variation 变幻 midjourney describe 识图 midjourney blend 混图 midjourney 垫图 绘图进度百分比、实时图像显示 自身支持midjourney-api 参数说明 MIDJOURNEY_PROXY_URL …
阅读更多...
组态王与多台PLC之间无线以太网通信

组态王与多台PLC之间无线以太网通信

在实际系统中&#xff0c;同一个车间里分布多台PLC&#xff0c;通过上位机集中控制。通常所有设备距离在几十米到上百米不等。在有通讯需求的时候&#xff0c;如果布线的话&#xff0c;工程量较大耽误工期&#xff0c;这种情况下比较适合采用无线通信方式。 本方案以组态王和2…
阅读更多...
java -D详解

java -D详解

官方文档对 -D 有明确的解释&#xff0c;具体看 https://docs.oracle.com/javase/8/docs/technotes/tools/unix/java.html 简单解释一下 首先&#xff0c;java 命令是这么用的 其次&#xff0c;-D 是属于 [options] 这一块的。而 [options] 又分为如下几类 -D 就属于标准选…
阅读更多...
企业级医疗项目：码猿慢病云管理系统来了！

企业级医疗项目：码猿慢病云管理系统来了！

大家好&#xff0c;我是不才陈某~ 不知不觉转行到医疗领域已经两年多了&#xff0c;前后服务过三百多家医疗机构&#xff0c;深耕于医疗领域&#xff0c;不知道在座的各位有从事医疗领域工作的吗&#xff1f; 上个月和朋友搞了一套的企业级的医疗实战项目&#xff1a;码猿慢病云…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023