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

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>

<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>

// 引入axios
import axiosFile from "axios"
// 创建axios实例
const axiosExport = axiosFile.create()
// request拦截器
axiosExport.interceptors.request.use((req)=>{
    //添加响应类型
    req.responseType = "blob"
    return req
})