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

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

一、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文件,点击页面上方的左侧“文件”,然后点击“更多”里面的“选项”;在“信任中心”选择“信任中心设置”;再点击“受保护的视图”,取消选择右侧面板里面的勾选,最后点击“确定”。

  • 点击“选项”

  • 点击“信任中心”

  • 点击“受保护的视图”

  • 去掉右侧的选项,点击确定。
目录
相关文章
|
1月前
|
存储 Java API
Java实现导出多个excel表打包到zip文件中,供客户端另存为窗口下载
Java实现导出多个excel表打包到zip文件中,供客户端另存为窗口下载
41 4
|
2月前
|
JavaScript 前端开发 数据处理
Vue导出el-table表格为Excel文件的两种方式
Vue导出el-table表格为Excel文件的两种方式
73 6
|
7天前
|
数据采集 数据可视化 数据挖掘
利用Python自动化处理Excel数据:从基础到进阶####
本文旨在为读者提供一个全面的指南,通过Python编程语言实现Excel数据的自动化处理。无论你是初学者还是有经验的开发者,本文都将帮助你掌握Pandas和openpyxl这两个强大的库,从而提升数据处理的效率和准确性。我们将从环境设置开始,逐步深入到数据读取、清洗、分析和可视化等各个环节,最终实现一个实际的自动化项目案例。 ####
|
2月前
|
数据采集 存储 JavaScript
自动化数据处理:使用Selenium与Excel打造的数据爬取管道
本文介绍了一种使用Selenium和Excel结合代理IP技术从WIPO品牌数据库(branddb.wipo.int)自动化爬取专利信息的方法。通过Selenium模拟用户操作,处理JavaScript动态加载页面,利用代理IP避免IP封禁,确保数据爬取稳定性和隐私性。爬取的数据将存储在Excel中,便于后续分析。此外,文章还详细介绍了Selenium的基本设置、代理IP配置及使用技巧,并探讨了未来可能采用的更多防反爬策略,以提升爬虫效率和稳定性。
110 4
|
4月前
|
关系型数据库 MySQL Shell
不通过navicat工具怎么把查询数据导出到excel表中
不通过navicat工具怎么把查询数据导出到excel表中
47 0
|
2月前
|
数据处理 Python
Python实用记录(十):获取excel数据并通过列表的形式保存为txt文档、xlsx文档、csv文档
这篇文章介绍了如何使用Python读取Excel文件中的数据,处理后将其保存为txt、xlsx和csv格式的文件。
62 3
Python实用记录(十):获取excel数据并通过列表的形式保存为txt文档、xlsx文档、csv文档
|
2月前
|
easyexcel Java UED
SpringBoot中大量数据导出方案:使用EasyExcel并行导出多个excel文件并压缩zip后下载
在SpringBoot环境中,为了优化大量数据的Excel导出体验,可采用异步方式处理。具体做法是将数据拆分后利用`CompletableFuture`与`ThreadPoolTaskExecutor`并行导出,并使用EasyExcel生成多个Excel文件,最终将其压缩成ZIP文件供下载。此方案提升了导出效率,改善了用户体验。代码示例展示了如何实现这一过程,包括多线程处理、模板导出及资源清理等关键步骤。
|
3月前
|
数据采集 存储 数据挖掘
使用Python读取Excel数据
本文介绍了如何使用Python的`pandas`库读取和操作Excel文件。首先,需要安装`pandas`和`openpyxl`库。接着,通过`read_excel`函数读取Excel数据,并展示了读取特定工作表、查看数据以及计算平均值等操作。此外,还介绍了选择特定列、筛选数据和数据清洗等常用操作。`pandas`是一个强大且易用的工具,适用于日常数据处理工作。
|
4月前
|
SQL JSON 关系型数据库
n种方式教你用python读写excel等数据文件
n种方式教你用python读写excel等数据文件
|
4月前
|
存储 Java Apache