当前位置： 首页 > article >正文

DataGear 5.3.0 制作支持导出表格数据的数据可视化看板

article 2026/2/14 21:21:40

DataGear 内置表格图表底层采用的是DataTable表格组件，默认并未引入导出数据的JS支持库，如果有导出表格数据需求，则可以在看板中引入导出相关JS支持库，制作具有导出CSV、Excel、PDF功能的表格数据看板。

在新发布的5.3.0版本中，对表格功能进行了改进，在制作具有导出功能表格的看板时，仅需要引入jszip.js、pdfMake.js、vfs_fonts.js库即可。

如果不需要导出PDF，则不需要引入pdfMake.js、vfs_fonts.js库

首先，新建表格图表看板，例如：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="display:inline-block;width:100%;height:500px;"dg-chart-widget="..."></div>
</body>
</html>

然后，下载如下导出JS支持库：

https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js

https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js（仅导出PDF时需要）

https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js（仅导出PDF时需要）

并将它们上传为看板资源，例如：

lib/|--jszip.min.js|--pdfmake.min.js （仅导出PDF时需要）|--vfs_fonts.js （仅导出PDF时需要）

最后，在看板中引入上述JS库，配置表格图表导出按钮即可，例如：

<!DOCTYPE html>
<html>
<head>
<script src="lib/jszip.min.js"></script>
<script src="lib/pdfmake.min.js"></script> <!--仅导出PDF时需要-->
<script src="lib/vfs_fonts.js"></script> <!--仅导出PDF时需要-->
<style>
/*自定义导出按钮样式*/
.dt-buttons button.dt-button{padding: 0.2em 1em;color: green;
}
</style>
</head>
<body>
<div style="display:inline-block;width:100%;height:500px;"dg-chart-options="{buttons:[{extend:'csv',text:'导出CSV'},{extend:'excel',text:'导出Excel'},{extend:'pdf',text:'导出PDF'}, /*仅导出PDF时需要*/{extend:'print',text:'打印'}]}"dg-chart-widget="..."></div>
</body>
</html>

效果图如下所示：
在这里插入图片描述

使用下面的dg-chart-options可以自定义导出/打印标题、文件名

{buttons:[{extend:'csv',text:'导出CSV', filename: 'csv'},{extend:'excel',text:'导出Excel', filename: 'excel', title: null},{extend:'pdf',text:'导出PDF', filename: 'pdf', title: null}, /*仅导出PDF时需要*/{extend:'print',text:'打印', title: 'Title'}]
}

官网地址：

http://www.datagear.tech

源码地址：

Gitee：https://gitee.com/datagear/datagear

Github：https://github.com/datageartech/datagear

GitCode：https://gitcode.com/datageartech/datagear

相关文章：

DataGear 5.3.0 制作支持导出表格数据的数据可视化看板

DataGear 内置表格图表底层采用的是DataTable表格组件&#xff0c;默认并未引入导出数据的JS支持库&#xff0c;如果有导出表格数据需求&#xff0c;则可以在看板中引入导出相关JS支持库&#xff0c;制作具有导出CSV、Excel、PDF功能的表格数据看板。 在新发布的5.3.0版本中&a…...

编程日记 2026/2/14 21:21:40

Web网页内嵌 Adobe Pdf Reader 谷歌Chrome在线预览编辑PDF文档

随着数字化办公的普及&#xff0c;PDF文档已成为信息处理的核心载体&#xff0c;虽然桌面端有很多软件可以实现预览编辑PDF文档&#xff0c;而在线在线预览编辑PDF也日益成为一个难题。 作为网页内嵌本地程序的佼佼者——猿大师中间件&#xff0c;之前发布的猿大师办公助手&am…...

编程日记 2026/2/8 8:29:14

歌词json

绽放&#xff08;4:17&#xff09; {"lyrics": [{time: 00:00, text: 作词&#xff1a;郑润泽},{time: 00:01, text: 作曲&#xff1a;郑润泽},{time: 00:02, text: 编曲&#xff1a;赵建飞},{time: 00:03, text: 制作人&#xff1a;李淘/赵建飞},{time: 00:09, tex…...

编程日记 2026/2/13 17:01:04

CNG汽车加气站操作工备考真题及答案解析【判断题】

1、燃气经营许可证按照燃气经营规模和类别实行分级审批。&#xff08;√&#xff09; 解析&#xff1a;不同规模和类别的燃气经营&#xff0c;其许可证审批级别不同&#xff0c;以确保经营活动的规范和安全。 2、依照《安全生产法》的规定&#xff0c;安全生产监督检查人员对检…...

编程日记 2026/2/13 17:24:55

Sentinel[超详细讲解]-1

定义一系列 规则 &#x1f47a;&#xff0c;对资源进行 保护 &#x1f47a;&#xff0c; 如果违反的了规则&#xff0c;则抛出异常&#xff0c;看是否有fallback兜底处理&#xff0c;如果没有则直接返回异常信息&#x1f60e; 1. 快速入门 1.1 引入 Sentinel 依赖 <depend…...

编程日记 2026/2/14 5:45:10

CUDA专题8—CUDA L2缓存完全指南：从持久化策略到性能优化实战

1. 设备内存L2缓存访问管理 当CUDA内核反复访问全局内存中的某个数据区域时，此类数据访问可视为持久化(persisting)访问。反之，若数据仅被访问一次，则可视为流式(streaming)访问。 从CUDA 11.0开始，计算能力8.0及以上的设备能够调控L2缓存中数据的持久性，从而可能实现更…...

编程日记 2026/2/13 15:10:50

如何让 SQL2API 进化为 Text2API：自然语言生成 API 的深度解析？

在过去的十年里&#xff0c;技术的进步日新月异&#xff0c;尤其是在自动化、人工智能与自然语言处理&#xff08;NLP&#xff09;方面。 随着“低代码”平台的崛起&#xff0c;开发者和非技术人员能够更轻松地构建强大而复杂的应用程序。然而&#xff0c;尽管技术门槛降低了&…...

编程日记 2026/2/13 16:04:47

OCCT（2）Windows平台编译OCCT

文章目录 一、Windows平台编译OCCT1、准备环境2、下载源码3、下载第三方库4、使用 CMake 配置5、编译OCCT源码6、运行示例 一、Windows平台编译OCCT 1、准备环境 安装工具&#xff1a; Visual Studio&#xff08;推荐 VS2019/2022&#xff0c;选择 C 桌面开发 组件&#xff0…...

编程日记 2026/2/14 11:00:16

【蓝桥杯—单片机】通信总线专项 | 真题整理、解析与拓展 （更新ing...）

通信总线专项 前言SPI第十五届省赛题 UART/RS485/RS232UARTRS485RS232第十三届省赛题小结和拓展&#xff1a;传输方式的分类第十三届省赛 其他相关考点网络传输速率第十五届省赛题第十二届省赛题 前言 在本文中我会把 蓝桥杯单片机赛道 历年真题 中涉及到通信总线的题目整理出…...

编程日记 2026/2/14 10:56:36

【Golang】泛型与类型约束

文章目录 一、环境二、没有泛型的Go三、泛型的优点四、理解泛型&#xff08;一&#xff09;定义&#xff08;二&#xff09;调用&#xff08;三&#xff09;类型约束&#xff08;Type Constraint&#xff09;1&#xff09;接口与约束2&#xff09;结构体类型约束3&#xff09;类…...

编程日记 2026/2/13 16:38:59

Uni-app页面信息与元素影响解析

获取窗口信息uni.getWindowInfo {pixelRatio: 3safeArea:{bottom: 778height: 731left: 0right: 375top: 47width: 375}safeAreaInsets: {top: 47, left: 0, right: 0, bottom: 34},screenHeight: 812,screenTop: 0,screenWidth: 375,statusBarHeight: 47,windowBottom: 0,win…...

编程日记 2026/2/13 0:30:00

CentOS（最小化）安装之后，快速搭建Docker环境

本文以VMware虚拟机中安装最小化centos完成后开始。 1. 检查网络 打开网卡/启用网卡 执行命令ip a查看当前的网络连接是否正常&#xff1a; 如果得到的结果和我一样&#xff0c;有ens网卡但是没有ip地址&#xff0c;说明网卡未打开 手动启用&#xff1a; nmcli device sta…...

编程日记 2026/2/12 16:35:26

【身份证证件OCR识别】批量OCR识别身份证照片复印件图片里的文字信息保存表格或改名字，基于QT和腾讯云api_ocr的实现方式

项目背景 在许多业务场景中，需要处理大量身份证照片复印件，手动输入其中的文字信息效率低下且容易出错。利用 OCR（光学字符识别）技术可以自动识别身份证图片中的文字信息，结合 QT 构建图形用户界面，方便用户操作，同时使用腾讯 OCR API 能够保证较高的识别准确率。 界面…...

编程日记 2026/2/15 4:33:40

IP属地和发作品的地址不一样吗

在当今这个数字化时代&#xff0c;互联网已经成为人们日常生活不可或缺的一部分。随着各大社交平台功能的不断完善&#xff0c;一个新功能——IP属地显示&#xff0c;逐渐走进大众视野。这一功能在微博、抖音、快手等各大平台上得到广泛应用&#xff0c;旨在帮助公众识别虚假信…...

编程日记 2026/2/5 11:40:50

Redis - 概述

目录 ​编辑 一、什么是redis 二、redis能做什么&#xff08;有什么特点&#xff09;&#xff1f; 三、redis有什么优势 四、Redis与其他key-value存储有什么不同 五、Redis命令 六、Redis数据结构 1、基础数据结构 2、高级数据结构 一、什么是redis 1、redis&#x…...

编程日记 2026/2/12 8:17:36

vue3 根据城市名称计算城市之间的距离

<template><div class"distance-calculator"><h1>城市距离计算器</h1><!-- 城市输入框 --><div class"input-group"><inputv-model"city1"placeholder"请输入第一个城市"keyup.enter"cal…...

编程日记 2026/2/14 7:30:48

html 列表循环滚动，动态初始化字段数据

html <div class"layui-row"><div class"layui-col-md4"><div class"boxall"><div class"alltitle">超时菜品排行</div><div class"marquee-container"><div class"scroll-…...

编程日记 2026/2/8 13:45:51

QT基础：安装与简介

QT初级 1、简介1.1 安装1.2 设置1.3 在VS中配置Qt1.3 帮助文档 2、Qt项目2.1 创建项目2.1 项目文件2.2 Qt中的窗口类窗口显示 2.3 坐标体系2.4 内存回收 1、简介 QT是一个跨平台的C应用程序开发框架。几乎支持所有的平台, 可用于桌面程序开发以及嵌入式开发。 Qt是标准 C 的扩…...

编程日记 2026/2/10 17:28:55

41、当你在 index.html 中引用了一个公共文件（比如 common.js），修改这个文件后，用户访问页面时仍然看到旧内容，因为浏览器缓存了旧版本

由于浏览器缓存导致公共文件无法更新。当用户修改了公共文件&#xff08;如 JavaScript 或 CSS&#xff09;&#xff0c;但 index.html 中引用的文件名没有变化&#xff0c;浏览器会认为文件没有更新&#xff0c;继续使用缓存的旧版本。因此&#xff0c;需要通过某种方式让浏览…...

编程日记 2026/2/13 17:15:32

WEB安全-HTTPS

1 需求 结合Wireshark抓包实战&#xff0c;图文详解TCP三次握手及四次挥手原理&#xff08;附下载&#xff09; 结合Wireshark抓包分析&#xff0c;沉浸式体验HTTP请求的一次完整交互过程 https://mp.weixin.qq.com/s/f3LmUEtjIuLjkyjxJj7ebA 一文彻底了解DNS协议工作原理&…...

编程日记 2026/2/13 17:49:02

【宇宙回响】从Canvas到MySQL：飞机大战的全栈交响曲【附演示视频与源码】

🌟 这是星际大战系列的第三篇，感谢一路以来支持和关注这个项目的每一位朋友！ 💡 文章力求严谨，但难免有疏漏之处，欢迎各位朋友指出，让我们一起在交流中进步。 🎁 项目代码、文档和相关资源都可以免费获取，希望能帮助到更多对游戏开发感兴趣的朋友。 💌 如果您有任…...

编程日记 2026/2/12 19:54:28

Linux内核内存管理 ARM32页表映射流程和案例分享

ARM32架构使用两级页表结构将虚拟地址转换为物理地址&#xff0c;以下为详细流程及案例分析&#xff1a; ARM32页表映射流程 1.获取页目录基地址 MMU通过TTBR&#xff08;Translation Table Base Register&#xff09;寄存器获取当前进程的一级页表&#xff08;L1页表&#x…...

编程日记 2026/2/13 7:34:40

git push origin masterremote: [session-bd46a49f] The token username invalid

参考:如何把项目上传到Gitee&#xff08;保姆级教程&#xff09;_gitee上传项目-CSDN博客 1 新建仓库 username可以是登录账号的邮箱地址也可以是用户名 password可以是登录账号的密码也可以是私人令牌 2 创建分支 3 初始化 dev是你新建的分支 创建并切换分支 git init g…...

编程日记 2026/2/13 4:41:12

基于MCU实现的电机转速精确控制方案：软件设计与实现

本文将详细介绍一篇基于微控制器&#xff08;MCU&#xff09;的电机转速精确控制的软件方案。通过采样PWM信号控制和ADC采样技术&#xff0c;结合PID闭环控制算法&#xff0c;实现了电机转速的高效、稳定调节。以下是软件方案流程图&#xff0c;下文将对其进行展开讲解。 原图太…...

编程日记 2026/2/13 18:34:16

suse15 sp1使用华为云软件源yum源zypper源

登录suse15终端&#xff0c; cd /etc/zypp/repos.d/进入目录后执行以下命令&#xff1a; zypper ar -fcg https://mirrors.huaweicloud.com/opensuse/distribution/leap/15.1/repo/oss HuaWeiCloud:15.1:OSS zypper ar -fcg https://mirrors.huaweicloud.com/opensuse/distribu…...

编程日记 2025/12/17 22:26:41

amd64 架构机器如何拉取arm64的镜像

在 AMD 架构&#xff08;通常是 x86_64 架构&#xff09;的机器上拉取 ARM 架构的镜像 拉取指定架构的镜像 例如&#xff0c;要拉取 ARM64 架构的 nginx 镜像&#xff0c;可以使用以下命令&#xff1a; docker pull --platform linux/arm64 nginx...

编程日记 2026/2/15 0:41:17

【模拟CMOS集成电路笔记】轨到轨运放（Rail to Rail）基础（附带实例：基于1：3电流镜的轨到轨输入运放）

【模拟CMOS集成电路笔记】轨到轨运放&#xff08;Rail to Rail&#xff09;基础 0前言1 简介1.1轨到轨输入级(1)互补差分对&#xff1a;(2)输入范围切换&#xff1a; 1.2轨到轨输出级(1)推挽输出&#xff1a;(1)输出级偏置&#xff1a; 2轨到轨输入运放2.1基于电流倍增实现恒定…...

编程日记 2026/2/13 14:19:19

【零基础入门unity游戏开发——通用篇】图片相关设置

考虑到每个人基础可能不一样，且并不是所有人都有同时做2D、3D开发的需求，所以我把 【零基础入门unity游戏开发】 分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。 【C#篇】：主要讲解C#的基础语法，包括变量、数据类型、运算符、流程控制、面向对象等，适合没有编程基础的…...

编程日记 2026/2/14 12:57:34

解决关于原生gmssl无法直接输出sm2私钥明文的问题

解决关于原生gmssl无法直接输出sm2私钥明文的问题 问题描述解决方法解决方法一解决方法二 问题描述 通过gmssl生成sm2公私钥对时&#xff0c;输出的是加密的sm2私钥&#xff0c;无法获取到SM2私钥明文。 解决方法 解决方法一 手动解密&#xff1a; 解决方法二 修改源码&…...

编程日记 2026/2/14 7:23:11

齐次线性方程组及python求解

齐次线性方程组的概念 齐次线性方程组是指所有常数项都为零的线性方程组&#xff0c;其一般形式为&#xff1a; a 11 x 1 a 12 x 2 ⋯ a 1 n x n 0 a_{11}x_1 a_{12}x_2 \cdots a_{1n}x_n 0 a11​x1​a12​x2​⋯a1n​xn​0 a 21 x 1 a 22 x 2 ⋯ a 2 n x n 0 a_…...

编程日记 2026/2/14 20:40:27