快捷導(dǎo)航

Vue實(shí)現(xiàn)導(dǎo)出Excel表格文件提示“文件已損壞無(wú)法打開(kāi)”的解決方法

更新時(shí)間：2024年01月04日 11:30:30 作者：鄒榮樂(lè)

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

一、vue實(shí)現(xiàn)導(dǎo)出excel

1、前端實(shí)現(xiàn)

xlsx是一個(gè)用于讀取、解析和寫(xiě)入Excel文件的JavaScript庫(kù)。它提供了一系列的API來(lái)處理Excel文件。使用該庫(kù)，你可以將數(shù)據(jù)轉(zhuǎn)換為Excel文件并下載到本地。這種方法適用于在前端直接生成Excel文件的場(chǎng)景。

安裝xlsx依賴

npm install xlsx --save

引入并使用

<template>
    <div>
        <button @click="exportExcel">導(dǎo)出excel</button>
    </div>
</template>
<script>
import XLSX from 'xlsx'
export default {
    methods: {
        exportExcel() {
            // 準(zhǔn)備要導(dǎo)出的數(shù)據(jù)  
            const data = [
                ['姓名','年齡','性別','地址'],
                ['張三',18,'男','北京市'],
                ['李四',19,'女','上海市']
            ]
            // 將數(shù)據(jù)轉(zhuǎn)換為工作簿對(duì)象 
            const ws = XLSX.utils.aoa_to_sheet(data)
            const wb = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(wb,ws,'Sheet1')
            // 導(dǎo)出Excel文件  
            XLSX.writeFile(wb,'test.xlsx')
        }
    }
}
</script>

2、后端實(shí)現(xiàn)

在這種方法中，前端發(fā)起一個(gè)請(qǐng)求到后端，后端生成Excel文件并返回給前端，前端再將文件下載到本地?？梢允褂胊xios庫(kù)來(lái)發(fā)起請(qǐng)求，并使用Blob和a標(biāo)簽來(lái)下載文件。這種方法適用于需要在后端處理數(shù)據(jù)并生成Excel文件的場(chǎng)景。

后端返回blob流文件，前端接收并導(dǎo)出。

<template>
    <div>
        <button @click="exportExcel">導(dǎo)出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>

二、導(dǎo)出文件損壞

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

1、前端請(qǐng)求導(dǎo)出接口，增加返回類(lèi)型

注意，excel流文件一定要在請(qǐng)求的時(shí)候加上響應(yīng)類(lèi)型字段，也就是：responseType: 'blob’或者，responseType: ‘arraybuffer’ ，否則下載出來(lái)的excel文件就會(huì)損壞，就會(huì)打不開(kāi)。

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

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

2、取消受保護(hù)的視圖

具體操作：打開(kāi)excel文件，點(diǎn)擊頁(yè)面上方的左側(cè)“文件”，然后點(diǎn)擊“更多”里面的“選項(xiàng)”；在“信任中心”選擇“信任中心設(shè)置”；再點(diǎn)擊“受保護(hù)的視圖”，取消選擇右側(cè)面板里面的勾選，最后點(diǎn)擊“確定”。

點(diǎn)擊“選項(xiàng)”

點(diǎn)擊“信任中心”

點(diǎn)擊“受保護(hù)的視圖”

去掉右側(cè)的選項(xiàng)，點(diǎn)擊確定。

到此這篇關(guān)于Vue實(shí)現(xiàn)導(dǎo)出Excel表格，提示“文件已損壞，無(wú)法打開(kāi)”的解決方法的文章就介紹到這了,更多相關(guān)Vue導(dǎo)出Excel表格提示文件已損壞，無(wú)法打開(kāi)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: