首页 > 其他分享 >【Vue】vue3 中 如何将el-table的表格数据下载为.xlsx格式文件

【Vue】vue3 中 如何将el-table的表格数据下载为.xlsx格式文件

时间:2023-08-29 11:55:36浏览次数:40  
标签:el Vue const xlsx saver 格式文件 blob file data

安装依赖

首先,你需要安装 xlsx 和 file-saver 这两个库。

npm install xlsx file-saver --save

有兴趣可以看看两个库的官方说明,直接看下面使用也没问题。

xlsx 官方介绍

The SheetJS Community Edition offers battle-tested open-source solutions for extracting useful data from almost any complex spreadsheet and generating new spreadsheets that will work with legacy and modern software alike.
SheetJS社区版提供了经过实战考验的开源解决方案,用于从几乎任何复杂的电子表格中提取有用的数据,并生成可与传统和现代软件一起使用的新电子表格。
SheetJS Pro offers solutions beyond data processing: Edit complex templates with ease; let out your inner Picasso with styling; make custom sheets with images/graphs/PivotTables; evaluate formula expressions and port calculations to web apps; automate common spreadsheet tasks, and much more!
SheetJS Pro提供数据处理以外的解决方案:轻松编辑复杂的模板;用造型释放你内心的毕加索;使用图像/图形/数据透视表制作自定义工作表;评估公式表达式并将计算端口到 Web 应用程序;自动执行常见的电子表格任务,以及更多!

file-saver npm 文档

准备数据

将你要导出的表格数据准备为一个二维数组。比如:

  const data = tabelData.map((item: any) => {
    const arr: any[] = [];
    item.forEach((j: any) => {
      arr.push(j);
    });
    return arr;
  });

定义导出方法

你需要创建一个函数,用于处理你上面准备的数据,并且返回一个 xlsx 文件的 blob。

import * as XLSX from 'xlsx';

export const exportExcel = (data: any[]) => {
  // 创建一个空的工作簿
  const workbook = XLSX.utils.book_new();

  // 创建一个工作表
  const worksheet = XLSX.utils.aoa_to_sheet(data);

  // 将工作表添加到工作簿中
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

  // 将工作簿转换为二进制数据流
  const excelData = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' });

  // 将二进制数据流转换为 Blob 对象
  const blob = new Blob([excelData], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  });

  return blob;
};

下载文件

最后你需要下载文件,可以使用上面安装的 file-save 中提供的 saveAs 函数

import { saveAs } from 'file-saver';

// 处理表格文件
const blob = exportExcel(data);
const fileName = `${item.file.name.split('.')[0]}.xlsx`;
// 下载
saveAs(blob, fileName);

ps:如果在本地使用,正常下载但浏览器会报警告,是因为我们本地使用 http 下载导致了,这个可以不用管,线上是不会出现这个警告的。

参考资料

xlsx npm 文档
file-saver npm 文档
vue3导入elcel表格并展示(使用xlsx插件+vite+element-plus)/js上传表格(js+xlsx)

标签:el,Vue,const,xlsx,saver,格式文件,blob,file,data
From: https://www.cnblogs.com/wx980416/p/17664383.html

相关文章

  • selenium - 鼠标悬停点击
    前言:常见一些网页都是带有类似下图,当鼠标悬停在隐藏文本内容上时,显示所有内容。例如:我要点击“搜索设置”,先得把鼠标放在‘设置上’ F12-在页面中搜索‘高级搜索’,找到“搜索设置”文本,鼠标放到‘设置’上,display的值变为block;鼠标不放上去之前是none,即不可见元素。  ......
  • Vue3 Refs模板
    Refs模板用来获取页面DOM元素或者组件,类似于Vue2.X中的$refs。Refs模板的使用方法如下。(1)在setup()中创建ref对象,其值为null。(2)为元素添加ref属性,其值为步骤(1)中创建的ref对象名。(3)完成页面渲染之后,获取DOM元素或者组件。 src\views\HomeView.vue<template><d......
  • Java 14 EL表达式
     eljstl.jsp<%@pagecontentType="text/html;charset=UTF-8"language="java"%><html><head><title>Title</title></head><body><h1>首页</h1><%--指令包含<%@includefile=......
  • 深入探究Elasticsearch中的倒排索引技术
    在现代后端开发中,搜索引擎和数据检索是至关重要的功能。Elasticsearch作为一款开源的分布式搜索和分析引擎,其背后的核心技术之一就是倒排索引(InvertedIndex)。本篇博客将深入探讨倒排索引在Elasticsearch中的应用,以及如何利用这一技术来优化数据检索性能。什么是倒排索引?倒排索引是......
  • Vue3 依赖注入 provide() inject()
    依赖注入就是父组件向后代组件传递数据,可以向子组件传递数据,也可以向孙子组件传递数据。在父组件中使用provide()函数,向后代传递数据。在后代组件中使用inject()函数,获取传递过来的数据。 provide()​提供一个值,可以被后代组件注入。inject()​注入一个由祖先组件或整个应......
  • 1.5 编写自定位ShellCode弹窗
    在笔者上一篇文章中简单的介绍了如何运用汇编语言编写一段弹窗代码,虽然简易ShellCode可以被正常执行,但却存在很多问题,由于采用了硬编址的方式来调用相应API函数的,那么就会存在一个很大的缺陷,如果操作系统的版本不统或系统重启过,那么基址将会发生变化,此时如果再次调用基址参数则会......
  • 1.6 编写双管道ShellCode
    本文将介绍如何将CMD绑定到双向管道上,这是一种常用的黑客反弹技巧,可以让用户在命令行界面下与其他程序进行交互,我们将从创建管道、启动进程、传输数据等方面对这个功能进行详细讲解。此外,本文还将通过使用汇编语言一步步来实现这个可被注入的ShellCode后门,并以此提高代码通用性。......
  • 关于Python的学习记录(二十五_yield 关键字和生成器)
    Python中,生成器(Generator)是一种特殊的迭代器,它可以通过函数来创建。生成器函数使用 yield 关键字来产生一个值,并且在每次调用 yield 时暂停执行,保留函数的状态,以便下次调用时可以从上次暂停的地方继续执行。生成器具有以下特点:生成器函数使用def关键字定义,但是它们的执行方......
  • Cisco SD-WAN (Viptela) version 20.12.1 ED - 软件定义广域网
    CiscoSD-WAN(Viptela)version20.12.1ED-软件定义广域网请访问原文链接:https://sysin.org/blog/cisco-sd-wan-20/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org支持SASE的架构,其集成了面向多云、安全、统一通信和应用优化的各种功能,可用于轻松安全地将任何......
  • Cisco ISR 4000 Series IOS XE Release Dublin-17.12.1a ED - 思科 4000 系列集成服
    CiscoISR4000SeriesIOSXEReleaseDublin-17.12.1aED思科4000系列集成服务路由器请访问原文链接:https://sysin.org/blog/cisco-isr-4000/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org思科4000系列集成服务路由器让您的分支机构站点为实施全数字化转型......