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

Vue实现导出Excel表格,提示“文件已损坏,无法打开”的解决方法

一、vue实现导出excel
1、前端实现

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

  • 安装xlsx依赖
npm install xlsx --save
  • 引入并使用
<template><div><button @click="exportExcel">导出excel</button></div>
</template><script>
import XLSX from 'xlsx'
export default {methods: {exportExcel() {// 准备要导出的数据  const data = [['姓名','年龄','性别','地址'],['张三',18,'男','北京市'],['李四',19,'女','上海市']]// 将数据转换为工作簿对象 const ws = XLSX.utils.aoa_to_sheet(data)const wb = XLSX.utils.book_new()XLSX.utils.book_append_sheet(wb,ws,'Sheet1')// 导出Excel文件  XLSX.writeFile(wb,'test.xlsx')}}
}
</script>
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文件,点击页面上方的左侧“文件”,然后点击“更多”里面的“选项”;在“信任中心”选择“信任中心设置”;再点击“受保护的视图”,取消选择右侧面板里面的勾选,最后点击“确定”。

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

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

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

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

相关文章:

Vue实现导出Excel表格,提示“文件已损坏,无法打开”的解决方法

一、vue实现导出excel 1、前端实现 xlsx是一个用于读取、解析和写入Excel文件的JavaScript库。它提供了一系列的API来处理Excel文件。使用该库&#xff0c;你可以将数据转换为Excel文件并下载到本地。这种方法适用于在前端直接生成Excel文件的场景。 安装xlsx依赖 npm inst…...

分发糖果,Java经典算法编程实战。

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…...

鸿蒙原生应用再添新丁!中国移动 入局鸿蒙

鸿蒙原生应用再添新丁&#xff01;中国移动 入局鸿蒙 来自 HarmonyOS 微博1月2日消息&#xff0c;#中国移动APP启动鸿蒙原生应用开发#&#xff0c;拥有超3亿用户的中国移动APP宣布&#xff0c;正式基于HarmonyOS NEXT启动#鸿蒙原生应用#及元服务开发。#HarmonyOS#系统的分布式…...

一个人能不能快速搭建一套微服务环境

一、背景 大型软件系统的开发现在往往需要多人的协助&#xff0c;特别是前后端分离的情况下下&#xff0c;分工越来越细&#xff0c;那么一个人是否也能快速搭建一套微服务系统呢&#xff1f; 答案是能的。看我是怎么操作的吧。 二、搭建过程 1、首先需要一套逆向代码生成工…...

计算机毕业设计------经贸车协小程序

项目介绍 本项目分为三种用户类型&#xff0c;分别是租赁者&#xff0c;车主&#xff0c;管理员用户&#xff1b; 管理员用户包含以下功能&#xff1a; 管理员登录,个人中心,租赁者管理,车主管理,赛事活动管理,车类别管理,租车管理,租车订单管理,车辆出售管理,购买订单管理,…...

数据结构OJ实验11-拓扑排序与最短路径

A. DS图—图的最短路径&#xff08;无框架&#xff09; 题目描述 给出一个图的邻接矩阵&#xff0c;输入顶点v&#xff0c;用迪杰斯特拉算法求顶点v到其它顶点的最短路径。 输入 第一行输入t&#xff0c;表示有t个测试实例 第二行输入顶点数n和n个顶点信息 第三行起&…...

你的第一个JavaScript程序

JavaScript&#xff0c;即JS&#xff0c;JavaScript是一种具有函数优先的轻量级&#xff0c;解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名&#xff0c;但是它也被用到了很多非浏览器环境中&#xff0c;JavaScript基于原型编程、多范式的动态脚本语言…...

CMake入门教程【基础篇】列表操作(list)

文章目录 1. 定义列表2. 获取列表长度3. 获取列表元素4. 追加元素到列表末尾5. 插入元素到指定位置6. 移除指定位置的元素7. 移除指定值的元素8. 替换指定位置的元素9. 迭代列表元素 #mermaid-svg-IAjFPWI6IXEGYmuU {font-family:"trebuchet ms",verdana,arial,sans-…...

普中STM32-PZ6806L开发板(HAL库函数实现-读取内部温度)

简介 主芯片STM32F103ZET6&#xff0c;读取内部温度其他知识 内部温度所在ADC通道 温度计算公式 V25跟Avg_Slope值 参考文档 stm32f103ze.pdf 电压计算公式 Vout Vref * (D / 2^n) 其中Vref代表参考电压&#xff0c; n为ADC的位数&#xff0c; D为ADC输入的数字信号。 实现…...

普中STM32-PZ6806L开发板(使用过程中的问题收集)

Keil使用ST-Link 报错 Internal command error 描述: 在某一次使用过程中&#xff0c;前面都是正常使用, Keil在烧录时报错Internal command error, 试了网上的诸多方式, 例如 升级固件;ST-Link Utility 清除;Keil升级到最新版本;甚至笔者板子的Micro头也换了&#xff0c;因为坏…...

八股文打卡day12——计算机网络(12)

面试题&#xff1a;HTTPS的工作原理&#xff1f;HTTPS是怎么建立连接的&#xff1f; 我的回答&#xff1a; 1.客户端向服务器发起请求&#xff0c;请求建立连接。 2.服务器收到请求之后&#xff0c;向客户端发送其SSL证书&#xff0c;这个证书包含服务器的公钥和一些其他信息…...

自然语言处理2——轻松入门情感分析 - Python实战指南

目录 写在开头1.了解情感分析的概念及其在实际应用中的重要性1.1 情感分析的核心概念1.1.1 情感极性1.1.2 词汇和上下文1.1.3 情感强度1.2 实际应用中的重要性 2. 使用情感分析库进行简单的情感分析2.1 TextBlob库的基本使用和优势2.1.1 安装TextBlob库2.1.2 文本情感分析示例2…...

pygame学习(一)——pygame库的导包、初始化、窗口的设置、打印文字

导语 pygame是一个跨平台Python库(pygame news)&#xff0c;专门用来开发游戏。pygame主要为开发、设计2D电子游戏而生&#xff0c;提供图像模块&#xff08;image&#xff09;、声音模块&#xff08;mixer&#xff09;、输入/输出&#xff08;鼠标、键盘、显示屏&#xff09;…...

前端面试

1. 什么是MVVM,MVC&#xff0c;MVP模型&#xff1f; 软件架构模式&#xff1a; MVC: M&#xff1a; 模型&#xff0c;拉取数据的类。 V&#xff1a; 视图&#xff0c;展现给用户的视觉效果。 C&#xff1a; 控制器&#xff0c;通知M拉取数据&#xff0c;并且给V。 > MV…...

Spring Boot快速搭建一个简易商城项目【完成登录功能且优化】

完成登录且优化&#xff1a; 未优化做简单的判断&#xff1a; 全部异常抓捕 优化&#xff1a;返回的是json的格式 BusinessException&#xff1a;所有的错误放到这个容器中&#xff0c;全局异常从这个类中调用 BusinessException&#xff1a; package com.lya.lyaspshop.exce…...

KG+LLM(一)KnowGPT: Black-Box Knowledge Injection for Large Language Models

论文链接&#xff1a;2023.12-https://arxiv.org/pdf/2312.06185.pdf 1.Background & Motivation 目前生成式的语言模型&#xff0c;如ChatGPT等在通用领域获得了巨大的成功&#xff0c;但在专业领域&#xff0c;由于缺乏相关事实性知识&#xff0c;LLM往往会产生不准确的…...

使用anaconda创建爬虫spyder工程

1.由于每个工程使用的环境都可能不一样&#xff0c;因此一个好的习惯就是不同的工程都创建属于自己的环境&#xff0c;在anaconda中默认的环境是base&#xff0c;我们现在来创建一个名为spyder的环境&#xff0c;专门用于爬虫工程&#xff1a; //括号中名字&#xff0c;代表当…...

网络通信(7)-TCP协议解析

目录 一、定义 二、主要特点 三、报文格式 四、工作方式...

win32 WM_MENUSELECT消息学习

之前写了一些win32的程序&#xff0c;处理菜单单击都是处理WM_COMMAND消息&#xff0c;通过 LOWORD(wParam) 获取菜单ID&#xff0c;判断单击的是哪个菜单项&#xff1b; 还有一些其他菜单消息&#xff1b; 当在菜单项中移动光标或鼠标&#xff0c;程序会收到许多WM_MENUSELEC…...

Java学习苦旅(十六)——List

本篇博客将详细讲解Java中的List。 文章目录 预备知识——初识泛型泛型的引入泛型小结 预备知识——包装类基本数据类型和包装类直接对应关系装包与拆包 ArrayList简介ArrayList使用ArrayList的构造ArrayList常见操作ArrayList遍历 结尾 预备知识——初识泛型 泛型的引入 我…...

专业术语统计报告_园区综合能源系统多时间尺度协同优化运行方法研究

专业术语统计报告_园区综合能源系统多时间尺度协同优化运行方法研究 一、概要简析 【概要分析】 本文档《园区综合能源系统多时间尺度协同优化运行方法研究》超用心地围绕研究主题展开了系统性探讨哦😜!文档总字符数足足有158527,其中中文字符53671个,英文字词12011个,…...

OAI 5G核心网搭建后,如何用Docker命令进行日常运维和故障排查?

OAI 5G核心网Docker运维实战&#xff1a;从日志分析到故障排查 当OAI 5G核心网完成基础部署后&#xff0c;真正的挑战才刚刚开始。面对由多个容器组成的复杂系统&#xff0c;如何快速定位AMF拒绝注册的原因&#xff1f;SMF的PDU会话建立失败该如何排查&#xff1f;本文将分享一…...

如何免费使用GanttProject:开源项目管理软件的完整入门指南

如何免费使用GanttProject&#xff1a;开源项目管理软件的完整入门指南 【免费下载链接】ganttproject Official GanttProject repository. 项目地址: https://gitcode.com/gh_mirrors/ga/ganttproject 你是否正在寻找一款功能强大且完全免费的项目管理工具&#xff1f;…...

深度解析20辆电动汽车29个月真实充电数据:电池容量衰减评估与健康监测关键技术

深度解析20辆电动汽车29个月真实充电数据&#xff1a;电池容量衰减评估与健康监测关键技术 【免费下载链接】battery-charging-data-of-on-road-electric-vehicles This repository is transfered from the personal account of Dr. Zhognwei Deng (Michael Teng) 项目地址: …...

如何高效使用Windows键盘记录工具:开源监控解决方案

如何高效使用Windows键盘记录工具&#xff1a;开源监控解决方案 【免费下载链接】keylogger Keylogger for Windows. 项目地址: https://gitcode.com/gh_mirrors/keylogg/keylogger Windows键盘记录工具Keylogger for Windows是一款专为系统管理员和安全研究人员设计的开…...

Carla 启动卡在75%并报“Fatal error”:从崩溃日志到资源缺失的排查实录

1. 当Carla卡在75%&#xff1a;从崩溃现象到问题定位 那天我正在Windows环境下调试Carla仿真平台&#xff0c;编译过程一切顺利&#xff0c;但执行make launch命令后&#xff0c;进度条就像被施了定身咒——永远停在了75%的位置。紧接着弹出的"Fatal error"对话框让我…...

汉高2026年第一季度实现稳健有机销售增长

美通社消息&#xff1a;汉高公布了2026年第一季度的销售额&#xff0c;约为50亿欧元&#xff0c;有机(即根据汇率和收购/撤资进行调整后)销售额实现1.7%的稳健增长。两大业务部门均拉动业绩增长&#xff0c;销量与价格均实现正向增长。第一季度欧洲地区的有机销售下降3.4%。在印…...

AI模型评估资源精选:从标准基准到定制化实践指南

1. 项目概述&#xff1a;为什么我们需要一个AI评估资源精选集&#xff1f;如果你最近也在折腾大语言模型&#xff0c;无论是想自己微调一个&#xff0c;还是想评估市面上哪个模型更适合你的业务场景&#xff0c;大概率会遇到一个头疼的问题&#xff1a;评估标准太多了&#xff…...

架构范式转移:DeepSeek-Coder-V2如何重构企业级代码智能的ROI模型

架构范式转移&#xff1a;DeepSeek-Coder-V2如何重构企业级代码智能的ROI模型 【免费下载链接】DeepSeek-Coder-V2 DeepSeek-Coder-V2: Breaking the Barrier of Closed-Source Models in Code Intelligence 项目地址: https://gitcode.com/GitHub_Trending/de/DeepSeek-Code…...

Intel RealSense D435深度数据采集全流程:从Viewer截图到.csv/.raw文件深度解析

Intel RealSense D435深度数据采集全流程&#xff1a;从Viewer截图到.csv/.raw文件深度解析 深度视觉技术正在重塑工业检测、机器人导航和三维重建等领域的工作流程。作为Intel RealSense系列中的明星产品&#xff0c;D435深度相机以其出色的性价比和易用性&#xff0c;成为开发…...