Vue實現(xiàn)導出Excel表格文件提示“文件已損壞無法打開”的解決方法

更新時間：2024年01月04日 11:30:30 作者：鄒榮樂

xlsx用于讀取解析和寫入Excel文件的JavaScript庫,它提供了一系列的API處理Excel文件,使用該庫,可以將數(shù)據(jù)轉(zhuǎn)換Excel文件并下載到本地,適用于在前端直接生成Excel文件,這篇文章主要介紹了Vue實現(xiàn)導出Excel表格,提示文件已損壞,無法打開的解決方法,需要的朋友可以參考下

一、vue實現(xiàn)導出excel

1、前端實現(xiàn)

xlsx是一個用于讀取、解析和寫入Excel文件的JavaScript庫。它提供了一系列的API來處理Excel文件。使用該庫，你可以將數(shù)據(jù)轉(zhuǎn)換為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() {
            // 準備要導出的數(shù)據(jù)  
            const data = [
                ['姓名','年齡','性別','地址'],
                ['張三',18,'男','北京市'],
                ['李四',19,'女','上海市']
            ]
            // 將數(shù)據(jù)轉(zhuǎn)換為工作簿對象 
            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、后端實現(xiàn)

在這種方法中，前端發(fā)起一個請求到后端，后端生成Excel文件并返回給前端，前端再將文件下載到本地?？梢允褂胊xios庫來發(fā)起請求，并使用Blob和a標簽來下載文件。這種方法適用于需要在后端處理數(shù)據(jù)并生成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>

二、導出文件損壞

前端開發(fā)中導出excel文件，文件可以正常下載，但是使用office或者wps
打開失敗，提示“文件已損壞，無法打開”。

1、前端請求導出接口，增加返回類型

注意，excel流文件一定要在請求的時候加上響應類型字段，也就是：responseType: 'blob’或者，responseType: ‘arraybuffer’ ，否則下載出來的excel文件就會損壞，就會打不開。

axios發(fā)請求，給axios做了二次封裝，在請求攔截器的地方添加。

// 引入axios
import axiosFile from "axios"
// 創(chuàng)建axios實例
const axiosExport = axiosFile.create()
// request攔截器
axiosExport.interceptors.request.use((req)=>{
    //添加響應類型
    req.responseType = "blob"
    return req
})