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

使用vue3框架vue-next-admin导出列表数据

news 来源：原创 2025/9/20 15:02:11

在 Vue3 中实现 Excel 导出功能可以通过以下步骤完成，这里使用 `xlsx` 库来实现前端 Excel 导出：
1. 安装依赖

npm install xlsx file-saver
# 或
yarn add xlsx file-saver

2. 实现代码示例
需要在当前页引入

import * as XLSX from "xlsx";

注释：我导出的数据为列表的全部数据（datum）；
自定义我需要的表头，大家可以根据自己的需要进行替换。
还可以只导出当前页的数据，可以根据分页进行数据划分。
这个方法图片导出是url的路径，不是当前的图片。

<template><button @click="exportToExcel">导出 Excel</button>
</template>
// 导出
import * as XLSX from "xlsx";
// 导出框显示
const datum = ref([]);
// 导出全部数据的函数
// 导出全部数据的函数
const exportBtn = () => {// 获取全部的数据const currentPageData = datum.value;// 处理表格中的格式化内容const exportData = currentPageData.map((row, index) => ({序号: (currentPage4.value - 1) * pageSize4.value + index + 1, // 序号公司名称: row.title, // 公司名称商家门头照: row.img, // 商家门头照（直接导出图片URL）手续费: row.proce_money,手续费比例: row.procedure_ratio,分账金额: row.split_money,分账比例: row.then_ratio,应得: row.must_money,银行卡号: row.card, // 银行卡号价格: row.money, // 价格状态: row.state === 0 ? "未分账" : row.state === 1 ? "已分账" : "未知类型", // 类型创建时间: row.create_time, // 创建时间}));// 定义表头const headers = ["序号","公司名称","商家门头照","手续费","手续费比例","分账金额","分账比例","应得","银行卡号","价格","状态","创建时间",];// 创建工作簿const wb = XLSX.utils.book_new();// 将数据和表头转换为工作表const ws = XLSX.utils.json_to_sheet(exportData, { header: headers });// 计算每列的最大宽度const maxwidth = function (sheet, idx) {let max = 0;const range = sheet["!ref"];if (range) {const rowCount = parseInt(range.split(":")[1].replace(/[A-Za-z]/g, ""));for (let row = 0; row <= rowCount; ++row) {const cell_ref = XLSX.utils.encode_cell({ c: idx, r: row });const cell = sheet[cell_ref];if (cell && cell.v) {max = Math.max(max, String(cell.v).length);}}}return max;};// 定义列宽数组const wscols = [];headers.forEach((header, idx) => {wscols.push({ wch: maxwidth(ws, idx) + 2 }); // 给列宽加点余量});// 设置工作表的列宽ws["!cols"] = wscols;// 将工作表添加到工作簿XLSX.utils.book_append_sheet(wb, ws, "分账数据");// 导出 Excel 文件XLSX.writeFile(wb, "分账数据.xlsx");// 显示成功消息ElMessage({type: "success",message: "全部导出成功",});
};

3. 关键代码解释

数据转换
utils.json_to_sheet(data) 将 JSON 数据转换为 Excel 工作表格式。

工作簿操作

utils.book_new() 创建新工作簿。
utils.book_append_sheet(workbook, worksheet, 'Sheet1') 将工作表添加到工作簿。
文件导出

writeFile(workbook, filename) 是 xlsx 提供的一键导出方法。
如果需要更精细控制（如自定义 Blob），可以使用 write 方法生成二进制数据，再结合 file-saver 保存。

使用vue3框架vue-next-admin导出列表数据

在 Vue3 中实现 Excel 导出功能可以通过以下步骤完成，这里使用 xlsx 库来实现前端 Excel 导出： 1. 安装依赖 npm install xlsx file-saver # 或 yarn add xlsx file-saver2. 实现代码示例需要在当前页引入 import * as XLSX from "xlsx";注…...

编程日记 2025/9/20 15:02:11

机器学习（1）安装Pytorch

1.安装命令 pip3 install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu118 2.安装过程Log： Looking in indexes: https://download.pytorch.org/whl/cu118 Co…...

编程日记 2025/9/15 16:23:28

讯方·智汇云校华为官方授权培训机构

1.官方授权讯方智汇云校是华为领先级授权培训机构（华为授权培训合作伙伴（HALP）体系，分为认证、优选、领先三个等级，领先级是HALP最高级），代表着华为对培训合作伙伴在专业能力、师资队伍、合作…...

编程日记 2025/9/20 15:01:39

彻底理解零拷贝技术，zero-copy

计算机处理的任务大体可以分为两类：CPU密集型与IO密集型。当前流行的互联网应用更多的属于IO密集型，传统的IO标准接口都是基于数据拷贝的，这篇文章我们主要关注该怎样从数据拷贝的角度来优化IO性能，让你的程序在IO性能方面赶超P8。…...

编程日记 2025/9/20 15:00:05

使用 MySQL 从 JSON 字符串提取数据

使用 MySQL 从 JSON 字符串提取数据在现代数据库管理中，JSON 格式因其灵活性而广泛使用。然而，当数据存储在 JSON 中时，我们经常需要将其转换为更易于处理的格式。本篇文章将通过一个具体的 SQL 查询示例，展示如何从存储在 MySQ…...

编程日记 2025/9/20 8:01:58

矛盾（WEB）

##解题思路打开靶场就是一段自相矛盾的代码，既要num是数字类型，又要判断为1 这种情况我们会想到弱类型的编程语言，插件查看过后，php就是弱类型的语言，此处并非是严格相等，只是因此可以根据弱类型编程语言…...

编程日记 2025/9/16 5:50:25

优先队列（典型算法思想）—— OJ例题算法解析思路

目录一、1046. 最后一块石头的重量 - 力扣（LeetCode） 算法代码： 代码思路使用优先队列（大根堆） 将所有石头放入堆中模拟碰撞过程返回最后的重量代码解析时间复杂度示例输入输出二、703. 数据流…...

编程日记 2025/9/20 4:48:34

IGBT的损耗性分析

铝合金外壳设计器地址：嘉立创铝合金外壳/壳体/盒型-让您的产品更出彩 IGBT和MOS的损耗谁大: 电子元器件常见失效模式: 电子元器件的失效模式多种多样，以下是一些常见的失效模式及其原因：开路：原因：内部连接断开、焊点断裂、导线断裂等。影响：电流无法通过，电路中断。…...

编程日记 2025/9/20 0:41:09

TypeScript跟js,es6这些的区别

TypeScript 一、TypeScript 是什么想象 JavaScript 是一个自由奔放的艺术家，它在创作（编写代码）时不受太多约束，非常灵活，但有时也容易犯错且难以调试。而 TypeScript 就像是给这位艺术家配备了一套精确的工具和规范…...

编程日记 2025/9/19 12:32:22

单例模式代码示例

饿汉式：在类加载时就创建单例实例，线程安全。代码如下： public class Singleton {// 私有静态实例private static final Singleton instance new Singleton();// 私有构造函数private Singleton() {}// 公共访问方法public static Singleto…...

编程日记 2025/9/17 16:22:30

掌握 ElasticSearch的 _source 过滤

掌握 ElasticSearch的 _source 过滤 1. 引言2. _source 元数据基础2.1 什么是 _source 字段？2.2 _source 的基本用法 3. 禁用 _source3.1 如何禁用 _source 字段3.2 禁用 _source 的利弊3.3 最佳实践建议 4. _source 数据源过滤4.1 为什么需要数据源过滤&#xff1f…...

编程日记 2025/9/14 20:39:20

车载音频配置（二）

目录 OEM 自定义的车载音频上下文动态音频区配置向前兼容性 Android 14 车载音频配置在 Android 14 中，AAOS 引入了 OEM 插件服务，使你可以更主动地管理由车载音频服务监督的音频行为。随着新的插件服务的引入，车载音频配置文件中添加了以下更改： • OEM 自定义的车…...

编程日记 2025/9/19 22:23:15

开目3DCAPP系列：三维制造成本分析与估算软件3DDFC

开目3DDFC 是一款基于 MBD 模型和工艺知识库的专业三维制造成本分析与估算软件，在不依赖详细工艺路线的情况下，根据零件几何信息和精度信息一键式完成零件成本的分析与估算，为面向成本的设计优化提供参考指引，也为企业对外产品报价…...

编程日记 2025/9/15 18:28:12

化学品安全数据表（MSDS）的全面解析与实用指南

SDS（安全数据表），也称为MSDS（材料安全数据表），是用于详细说明化学品的理化特性（如pH值、闪点、易燃性、反应活性等）及其对使用者健康（如致癌、致畸等）潜在危害…...

编程日记 2025/9/13 15:01:38

赛前启航 | Azure 应用开发实战指南：开启创意的无限可能

在 AI 时代，如何高效构建、优化和部署你的应用？如何充分利用微软 Azure 的强大能力，让开发更敏捷，性能更卓越？2 月 21 日 14:00-16:00，微软 AI 开发者挑战赛赛前指导第二场直播，带你全方位掌握 …...

编程日记 2025/9/17 16:37:39

Visual Studio Code的下载安装与汉化

1.下载安装 Visual Studio Code的下载安装十分简单，在本电脑的应用商店直接下载安装----注意这是社区版-----一般社区版就足够用了---另外注意更改安装地址 2.下载插件重启后就是中文版本了...

编程日记 2025/9/7 20:00:30

home assistant ddns动态域名解析插件

home assistant ddns动态域名解析插件使用方法在HACS中搜索 ddns安装(hacs目前还没有合并我的提交，目前不可用)，或者 clone https://github.com/weiangongsi/ddns.git, 将 custom_components/ddns目录拷贝至 Home Assistant 配置目录的 custom_compon…...

编程日记 2025/9/14 22:34:21

金融交易算法单介绍

0.背景股票交易时，常见的订单类型有基础订单和条件订单。基础订单市价单限价单碎股单等等条件订单止损市价单止损限价单触及市价单（止盈）触及限价单（止盈）跟踪止损市价单跟踪止损限价单等等除了基础订单和…...

编程日记 2025/9/7 20:00:26

LabVIEW利用CANopen的Batch SDO写入

本示例展示了如何通过CANopen协议向设备写入Batch SDO（批量服务数据对象）。Batch SDO允许用户在一次操作中配置多个参数，适用于设备的批量配置和参数设置。此方法能够简化多个参数的写入过程，提高设备管理效率。主要步骤&#xf…...

编程日记 2025/9/19 2:55:39

正式页面开发-登录注册页面

整体路由设计： 登录和注册的切换是切换组件或者是切换内容（v-if和 v-else)，因为点击两个之间路径是没有变化的。也就是登录和注册共用同一个路由。登录是独立的一级路由。登录之后进到首页，有三个大模块：文章分类&…...

编程日记 2025/9/18 9:32:02

vLLM专题（二）：安装-CPU

vLLM 是一个 Python 库，支持以下 CPU 变体。选择您的 CPU 类型以查看供应商特定的说明： Intel/AMD x86 vLLM 最初支持在 x86 CPU 平台上进行基本模型推理和服务，支持的数据类型包括 FP32、FP16 和 BF16。注意此设备没有预构建的 wheel 包或镜像，因此您必须从源代码构建 v…...

编程日记 2025/9/13 18:04:46

【CSS进阶】常见的页面自适应的方法

在前端开发中，自适应布局（Responsive Design）是一种让网页能够适应不同屏幕尺寸、设备和分辨率的技术。常见的自适应布局方法包括流式布局、弹性布局（Flexbox）、栅格布局（Grid）、媒体查询&…...

编程日记 2025/9/18 22:57:02

Java编程语言：从基础到高级应用的全面探索

在当今的软件开发领域中，Java无疑是一种极为流行且强大的编程语言。自1995年由Sun Microsystems推出以来，Java凭借其跨平台性、面向对象特性和丰富的API库，迅速成为企业级应用开发的首选语言。本文将带您从Java的基础语法入手，逐步…...

编程日记 2025/9/11 1:00:40

计算机视觉：神经网络实战之手势识别(附代码)

第一章：计算机视觉中图像的基础认知第二章：计算机视觉：卷积神经网络(CNN)基本概念(一) 第三章：计算机视觉：卷积神经网络(CNN)基本概念(二) 第四章：搭建一个经典的LeNet5神经网络(附代码) 第五章&#xff1…...

编程日记 2025/9/19 12:29:10

linux 面试题

1. 文件与目录操作 ls 功能：列出目录内容常用参数： -l：长格式显示（权限、大小、时间等）-a：显示隐藏文件（以.开头的文件）-h：以易读格式显示文件大小（如KB/…...

编程日记 2025/9/15 3:09:41

利用websocket检测网络连接稳定性

浏览器中打开F12，控制台中输入以下内容 > 回车 > 等待结果连接关闭表示断网 let reconnectDelay 1000; // 初始重连间隔 let pingInterval null; let socketManuallyClosed false; // 标志是否手动关闭function createWebSocket() {if (socketManuallyCl…...

编程日记 2025/9/15 16:16:07

Go入门之数组与切片

var arr1 [...]int{1, 2, 3}fmt.Println(len(arr1)) 数组长度不能扩展 var arr2 [...]int{0: 100, 5: 101}fmt.Println(len(arr2)) } 指定索引初始化可以通过for和range遍历值类型:基本数据类型和数组都是值类型，改变副本的值不会改变本身的值切片为引用数…...

编程日记 2025/9/12 5:07:58

《Nuxt.js 实战：从放弃到入门》六、打造个性化文字转图片工具

在当今短视频的时代，将文字转化为图片是一个常见且实用的需求，无论是用于社交媒体分享、设计宣传材料，还是制作个性化的视觉内容。今天，我们就来深入剖析一个使用 Vue 3 和 ElementPlus 构建的文字转图片工具的代码&#xf…...

编程日记 2025/9/15 9:24:27

软硬链接？

目录 1. 硬链接（Hard Link） 2. 软链接（Symbolic Link，符号链接） 总结： 1. 硬链接（Hard Link） 定义： 硬链接是直接指向文件数据块（inode）的链接。…...

编程日记 2025/9/15 1:15:14

轻松搭建本地大语言模型（二）Open-WebUI安装与使用

文章目录前置条件目标一、安装 Open-WebUI使用 Docker 部署二、使用 Open-WebUI（一）访问Open-WebUI（二）注册账号（三）模型选择（四）交互四、常见问题（一）容器…...

编程日记 2025/9/11 14:57:08

windows Redis Insight 如何查看宝塔docker里的redis数据

1、ping 命令用于测试网络连通性，它只需要目标 IP 地址作为参数，不需要端口号。正确的命令如下： ping 公网地址2、使用 Telnet 测试端口连通性 telnet 公网地址端口 telnet 47.108.67.228 6379如果连接成功，窗口会变为空白&am…...

编程日记 2025/9/19 20:28:39

Python高级语法之urllib

目录： 1、爬虫的介绍2、urllib的使用2.1、urllib的异常捕获2.2、urllib的实现微博cookie登陆2.3、urllib的handler处理器2.4、urllib的代理服务器2.5、urllib的代理服务池 1、爬虫的介绍 2、urllib的使用 2.1、urllib的异常捕获 2.2、urllib的实现微博cookie登陆 2…...

编程日记 2025/9/15 7:06:37

word$deepseep

1、进入官网地址。 DeepSeek 2、进入DeepSeek的API文档 3、点击DeepSeek开放平台左侧的“API Keys”, 再点击“创建API Key” 4、在弹出的对话框中，输入自己的API Key名称，点击创建。 sk-0385cad5e19346a0a4ac8b7f0d7be428 5、打开Word文档。 6、Word找…...

编程日记 2025/9/19 17:19:46

【koa】05-koa+mysql实现数据库集成：连接和增删改查

前言前面我们已经介绍了第二阶段的第1-4点内容，本篇介绍第5点内容：数据库集成（koamysql） 也是第二阶段内容的完结。一、学习目标在koa项目中正常连接数据库，对数据表进行增删改查的操作。二、操作步骤本篇文章…...

编程日记 2025/9/11 0:20:39

【深度学习】分布偏移纠正

分布偏移纠正正如我们所讨论的，在许多情况下训练和测试分布 P ( x , y ) P(\mathbf{x}, y) P(x,y)是不同的。在一些情况下，我们很幸运，不管协变量、标签或概念如何发生偏移，模型都能正常工作。在另一些情况下，我们…...

编程日记 2025/9/18 19:46:13

数据结构_前言

本次我们将进入一个新的阶段啦~ 要注意哦： 在学数据结构之前，我们要先掌握c语言中所学的指针、结构体、内存的存储这几部分，如果还没太掌握的话，那记得去复习回顾一下噢。下面我们就一起进入数据结构的学习吧！ 知识…...

编程日记 2025/9/15 5:05:35

运行环境在这里插入代码片 [roothadoop000 conf]# java -version java version "1.8.0_144" Java(TM) SE Runtime Environment (build 1.8.0_144-b01)[roothadoop000 conf]# echo $JAVA_HOME /home/hadoop/app/jdk1.8.0_144[roothadoop000 conf]# vi spark-env.sh …...

编程日记 2025/9/19 13:39:22

由because it is a JDK dynamic proxy that implements温习Spring的代理

由because it is a JDK dynamic proxy that implements温习Spring的代理项目场景原因分析1、报错位置2、错误原因3、业务需求解决方案1、注入CGlib代理2、取出原生对象项目场景昨日在启动一个SpringBoot项目时，发现启动失败，并在日志中出现了这样的…...

编程日记 2025/9/16 1:38:53

mac相关命令

显示和隐藏usr等隐藏文件文件 terminal输入: defaults write com.apple.Finder AppleShowAllFiles YESdefaults write com.apple.Finder AppleShowAllFiles NO让.bashrc每次启动shell自动生效编辑vim ~/.bash_profile 文件, 加上 if [ -f ~/.bashrc ]; then. ~/.bashrc fi注…...

编程日记 2025/9/13 8:04:20

Banana Pi OpenWRT One 官方路由器的第一印象

OpenWRT One是OpenWRT开源社区推出的首款官方开发板，与Banana Pi社区共同设计，由Banana Pi制造和发行。路由器采用蓝色铝合金外壳，质感极佳，视觉效果远超宣传图。整体设计简洁，呈长方形，虽然不是特别时尚&a…...

编程日记 2025/9/15 20:13:03

基于SpringBoot的“高考志愿智能推荐系统”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“高考志愿智能推荐系统”的设计与实现（源码数据库文档PPT) 开发语言：Java 数据库：MySQL 技术：SpringBoot 工具：IDEA/Ecilpse、Navicat、Maven 系统展示系统总体结构图系统首页界面系统注册页…...

编程日记 2025/9/8 10:41:22

探索Hugging Face：开源AI社区的核心工具与应用实践

引言：AI民主化的先锋在自然语言处理（NLP）领域，Hugging Face已成为开源社区的代名词。这个成立于2016年的平台，通过提供易用的工具和丰富的预训练模型库，彻底改变了开发者使用和部署AI模型的方式。截至202…...

编程日记 2025/9/19 9:46:26

SVM对偶问题

1、对偶问题数学基础对偶问题：在线性规划中，每一个线性规划问题(称为原问题)都有一个与之对应的对偶问题。从数学形式上看，如果原问题是求解一个线性目标函数的最大值（或最小值），在满足一系列线性不等式&…...

编程日记 2025/9/15 17:45:04

萃取的实现（三）

探测成员基于SFINAE，判断一个给定类型T，是否含有名为x的成员。探测类型成员判断一个给定类型T，是否含有类型成员size_type，源码如下： #include <type_traits> #include <iostream> #include <vect…...

编程日记 2025/9/11 19:55:29

nodejs版本管理，使用 nvm 删除node版本，要删除 Node.js 的某个版本详细操作

要删除 Node.js 的某个版本并保持 Node Version Manager (nvm) 的管理整洁，可以按以下步骤操作： 步骤 1：查看已安装的 Node.js 版本 nvm ls这会列出你通过 nvm 安装的所有 Node.js 版本。输出类似于： -> v18.17.1v16.20…...

编程日记 2025/9/12 13:00:24

openCV中如何实现滤波

图像滤波用于去除噪声和图像平滑，OpenCV 提供了多种滤波器： 1.1. 均值滤波： import cv2# 读取图像 image cv2.imread("example.jpg")# 均值滤波 blurred_image cv2.blur(image, (5, 5)) # (5, 5) 是滤波核的大小滤波核大小的…...

编程日记 2025/9/19 9:39:48