前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法

文章目录

      • 一、vue实现导出excel
        • 1、前端实现
          • 1、安装xlsx依赖
          • 2、引入
          • 3、方法
          • 4、使用
            • 4.1、将一个二维数组转成sheet
            • 4.2、将一个对象数组转成sheet
            • 4.3、合并单元格
            • 4.4、一次导出多个sheet
          • 5、支持的文件格式
        • 2、后端实现
      • 二、导出文件损坏
        • 1、前端请求导出接口,增加返回类型
        • 2、取消受保护的视图

一、vue实现导出excel

1、前端实现

xlsx是一个用于读取、解析和写入Excel文件的JavaScript库。它提供了一系列的API来处理Excel文件。使用该库,你可以将数据转换为Excel文件并下载到本地。这种方法适用于在前端直接生成Excel文件的场景。

更多介绍可参见官网

1、安装xlsx依赖
npm install xlsx --save
2、引入
import XLSX from 'xlsx'
3、方法

在这里插入图片描述

  • aoa_to_sheet: 这个工具类最强大也最实用了,将一个二维数组转成sheet,会自动处理number、string、boolean、date等类型数据;

  • table_to_sheet: 将一个table dom直接转成sheet,会自动识别colspan和rowspan并将其转成对应的单元格合并;

  • json_to_sheet: 将一个由对象组成的数组转成sheet。

4、使用
4.1、将一个二维数组转成sheet
<template><div><button @click="exportExcel">导出excel</button></div>
</template><script>
import XLSX from 'xlsx'
export default {methods: {exportExcel() {// 准备要导出的数据(二维数组)const data = [['姓名','年龄','性别','地址'],['张三',18,'男','北京市'],['李四',19,'女','上海市']]// 创建sheet对象const ws = XLSX.utils.aoa_to_sheet(data)// 创建一个工作薄const wb = XLSX.utils.book_new()// 将sheet对象放入到工作薄XLSX.utils.book_append_sheet(wb,ws,'Sheet1')// 导出Excel文件  XLSX.writeFile(wb,'test.xlsx')}}
}
</script>

在这里插入图片描述

4.2、将一个对象数组转成sheet
exportExcel() {// 准备要导出的数据(对象数组)let sheetData = [{ '姓名': '张三', '年龄': 18 ,'性别':'男','地址':'北京市'},{ '姓名': '李四', '年龄': 19 ,'性别':'女','地址':'上海市'},]// 创建sheet对象let sheet = XLSX.utils.json_to_sheet(sheetData)// 创建一个工作薄let wb = XLSX.utils.book_new()// 将sheet对象放入到工作薄XLSX.utils.book_append_sheet(wb, sheet, 'Sheet1')// 导出Excel文件  XLSX.writeFile(wb,'data.xlsx')
}

在这里插入图片描述

4.3、合并单元格
sheet['!merges'] = [{e: { c: 1, r: 0 }, // 合并结束位置 s: { c: 0, r: 0 } // 合并开始位置}
]
  • c:列位置 r:表示行位置,从0开始。

  • 上面的代码表示合并第1行的第1列和第2列。

在这里插入图片描述

4.4、一次导出多个sheet
XLSX.utils.book_append_sheet(wb, sheet1, sheetName1)
XLSX.utils.book_append_sheet(wb, sheet2, sheetName2)
XLSX.utils.book_append_sheet(wb, sheet3, sheetName3)
5、支持的文件格式

在这里插入图片描述

2、后端实现

在这种方法中,前端发起一个请求到后端,后端生成Excel文件并返回给前端,前端再将文件下载到本地。可以使用axios库来发起请求,并使用Blob和a标签来下载文件。这种方法适用于需要在后端处理数据并生成Excel文件的场景。

  • 后端返回blob流文件,前端接收并导出。
<template><div><button @click="exportExcel">导出excel</button></div>
</template><script>
import axios from 'axios'
export default {methods: {exportToExcel() {this.$http.get('/api/exportExcel').then(res => {const blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})const link = document.createElement('a')link.style.display = 'none'link.href = URL.createObjectURL(blob)link.download = 'test.xlsx'document.body.appendChild(link)link.click()});}}
}
</script>

二、导出文件损坏

前端开发中导出excel文件,文件可以正常下载,但是使用office或者wps
打开失败,提示“文件已损坏,无法打开”。

在这里插入图片描述

在这里插入图片描述

1、前端请求导出接口,增加返回类型

注意,excel流文件一定要在请求的时候加上响应类型字段,也就是:responseType: 'blob’或者,responseType: ‘arraybuffer’ ,否则下载出来的excel文件就会损坏,就会打不开。

  • axios发请求,给axios做了二次封装,在请求拦截器的地方添加。
// 引入axios
import axiosFile from "axios"
// 创建axios实例
const axiosExport = axiosFile.create()
// request拦截器
axiosExport.interceptors.request.use((req)=>{//添加响应类型req.responseType = "blob"return req
})
2、取消受保护的视图

具体操作:打开excel文件,点击页面上方的左侧“文件”,然后点击“更多”里面的“选项”;在“信任中心”选择“信任中心设置”;再点击“受保护的视图”,取消选择右侧面板里面的勾选,最后点击“确定”。

  • 点击“选项”
    在这里插入图片描述

  • 点击“信任中心”
    在这里插入图片描述

  • 点击“受保护的视图”
    在这里插入图片描述

  • 去掉右侧的选项,点击确定。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

宝塔FTP文件传输服务结合cpolar内网穿透实现远程连接本地服务

⛳️ 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 文章目录 ⛳️ 推荐1. Linux安装Cpolar2. 创建FTP公网地址3. 宝塔FTP服务设置4. FTP服务远程连接小结 5. 固定FTP公网地址6. 固…

C++ 20 Module

头文件包含一直是C/C的传统&#xff0c;它使代码声明与实现分离&#xff0c;但它有一个非常大的问题就是会被重复编译&#xff0c;拖累编译速度。 通常一个标准头文件iostream展开后可能达几十万甚至上百万行。笔者使用下面的示例进行测试&#xff0c;新建一个main.cc&#xf…

在vite.config.js 配置代理

在 Vite 中&#xff0c;你可以使用 proxy 选项在 vite.config.js 文件中配置代理。这可以让你在开发时将特定的请求代理到其他服务器或本地端口&#xff0c;而不需要修改源代码。下面是一个示例和说明&#xff0c;帮助你了解如何配置代理。 示例和说明 假设你有一些 API 请求…

processing集训day01

介绍 Processing是一门开源编程语言&#xff0c;提供了对图片&#xff0c;动画和声音进行编程的环境。学生&#xff0c;艺术家&#xff0c;设计师&#xff0c;建筑师&#xff0c;研究人员和业余爱好者可以使用Processing进行学习&#xff0c;制作原型以及作为生产工具。你可以…

C++:迭代器失效问题

目录 1.vector迭代器失效问题 1.底层空间改变 ​编辑 2.指定位置元素的删除操作 2.Linux下的迭代器失效检测 1.扩容 2.删除 3.解决方法 1.vector迭代器失效问题 迭代器的主要作用就是让算法能够不用关心底层数据结构&#xff0c;其底层实际就是一个指针&#xff0c;或者是…

前端使用css去除input框的默认样式

关键点&#xff1a; /* 关键点&#xff0c;让输入框无边框 */outline:none; border:none; 1.效果图 2.html <div class"container"><input type"text" placeholder"请输入用户名"><input type"text" placeholder&q…

145 删除链表的第N个节点的3种方式

问题描述&#xff1a;给定一个链表&#xff0c;删除链表的倒数第n个节点&#xff0c;并且返回链表的头结点。 栈求解&#xff1a;对于栈而言可以很好地解决链表只能从前往后访问的问题&#xff0c;栈是解决从后往前访问的利器。 public TreeNode deleteLastNNode(ListNode ro…

在命令提示符,csc不能使用,怎么办?

找到一个路径&#xff0c;"C:\Windows\Microsoft.NET\Framework64\v4.0.30319"&#xff0c;将此路径添加到环境变量。 在Windows 11里&#xff0c;Setting--About--Advanced System Settings--Environment Variables&#xff0c;双击Path。 PS C:\Users\a-xiaobodou…

Java算法 leetcode简单刷题记录5

Java算法 leetcode简单刷题记录5 老人的数目&#xff1a; https://leetcode.cn/problems/number-of-senior-citizens/ substring(a,b) 前闭后开 统计能整除数字的位数&#xff1a; https://leetcode.cn/problems/count-the-digits-that-divide-a-number/ 并不复杂&#xff0c;…

springboot+mysql校园社团信息管理系统-计算机毕业设计源码62756

目 录 摘要 第1章 绪论 1.1 研究背景 1.2 研究意义 1.3论文结构与章节安排 第2章 相关技术 ....... 2.1开发技术 2.2 Java简介 2.3 MVVM模式 2.4 B/S结构 2.5 MySQL数据库 2.6 SpringBoot框架介绍 第3章 系统分析 6 3.1 可行性分析 6 3.2 系统流程分析 6 3.3 …

前端JavaScript篇之JavaScript有哪些数据类型,它们的区别?

目录 JavaScript有哪些数据类型&#xff0c;它们的区别&#xff1f;数据类型区别 JavaScript有哪些数据类型&#xff0c;它们的区别&#xff1f; 数据类型 JavaScript数据类型有&#xff1a; Undefined、Null、Boolean、Number、String、Array、Object、Symbol、BigInt… St…

详解华为铁三角工作法完全解密.ppt

华为铁三角工作法是华为“以客户为中心”的思想在客户界面的集中体现。是一种以客户经理、方案经理和交付经理为核心的销售方法&#xff0c;将为客户服务所需要的主要能力&#xff0c;一直延伸到客户界面&#xff0c;并统一运作。 华为铁三角工作法的核心&#xff1a; - 让听…

CC工具箱使用指南:【现状规划用地变化检查(村规)】

一、简介 在规划工作中&#xff0c;有一个普遍性的需求&#xff0c;就是需要检查规划前后在用地上究竟发生了哪些变化。 这一点很重要&#xff0c;不仅是要展示给别人看&#xff0c;自己也要十分注意。 规划方案完成后&#xff0c;一定要进行用地变化的检查&#xff0c;曾经…

【Go】依赖包管理

查看已安装的包&#xff08;带着后边的三个点&#xff09; # 列出所有已安装的包 go list ...下载包 # 不指定版本下载 go get github.com/IBM/sarama删除包 go clean -i github.com/IBM/sarama 修改版本 # 删除包 go clean -i github.com/IBM/sarama # 指定版本下载 go ge…

centos根据文件内容进行全局搜索

centos根据文件内容进行全局搜索&#xff0c;全文搜索 grep -rnw ‘/path’ -e ‘pattern’ 递归 行号 精确 ‘路径’ 内容 例子&#xff1a; grep -rnw ‘/usr’ -e ‘告警方式配置’

定时任务组件Quartz

1.Quartz介绍 官网&#xff1a;Quartz Enterprise Job Scheduler 2.Quartz框架的使用思路 1&#xff09;job - 任务 - 你要做什么事&#xff1f; 2&#xff09;Trigger - 触发器 - 你什么时候去做&#xff1f; 3&#xff09;Scheduler - 任务调度 - 你什么时候需要去做什么…

23种设计模式概述

学习设计模式对我们有什么帮助&#xff1f; 1.提高代码质量和可维护性&#xff1a;设计模式是经过验证的解决方案&#xff0c;有助于解决常见的设计问题。使用设计模式可以减少代码冗余&#xff0c;增强代码的可读性和可维护性&#xff0c;并提高代码的可靠性。 2.提升开发效率…

NVM (Node Version Manager) 安装使用

博文目录 文章目录 管理工具安装使用 管理工具 GitHub, nvm-windows nvm-windows: Similar (not identical) to nvm, but for Windows 管理 Node.js 版本有多种工具可选择, 其中使用最广泛的是 nvm, 目前 72.3k Star, 不支持 Windows 系统, nvm-windows, 是其他大佬为 Windows…

C语言 存储类型 关键字

目录 一、C 程序中可用的存储类 二、C 语言部分关键字 1. sizeof关键字 2. sizeof 对变量名或者字面值可以不用括号&#xff0c;但是计算类型是必须要加括号的 3. sizeof 与 strlen 的区别 4. volatile关键字 一、C 程序中可用的存储类 概述&#xff1a;存储类定义 C 程序…

面试经典150题(90-92)

leetcode 150道题 计划花两个月时候刷完&#xff0c;今天&#xff08;第四十八天&#xff09;完成了3道(90-92)150&#xff1a; 90.&#xff08;108. 将有序数组转换为二叉搜索树&#xff09;题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排…