vue中将table导出为excel文件

if侠

已于 2023-07-31 13:23:05 修改

阅读量660

点赞数

文章标签： vue.js excel 前端

于 2023-07-11 15:26:13 首次发布

本文链接：https://blog.csdn.net/qq_51721168/article/details/131660979

版权

文章介绍了两种在前端实现Excel导出的方法。一种是使用XLSX插件，通过json_to_sheet将数据转换为工作表，并使用writeFile生成Excel文件。另一种方法需要后端配合，后端返回二进制数据，前端通过Blob对象创建URL并下载。

摘要由CSDN通过智能技术生成

目前实行这个功能的方案有很多，我这里主要介绍两种方法，

第一种方法，纯前端实现，不需要后端配合，使用xlsx插件来实现

首先安装 xlsx 插件

npm install xlsx
或
yarn add xlsx

在需要使用的地方引入

import XLSX from 'xlsx'

注意这里可能会遇到一个坑，如何引入完 XLSX运行项目是报这个错误

报错代码：

SntaxError: The requested module ‘/node_modules/.vite/deps/xlsx.js?v=3067d777’ does not provide an export named ‘default’

报错原因：

引入的库没有使用export default来导出,而是直接使用export导出一些属性和方法，自然无法使用【import XLSX from 'xxx’】而只能通过【import {} from 'xxx’】

如何解决：

只需要在引入时改成下面这种引入方式即可

import * as XLSX from 'xlsx'

完整代码：

<template>
<el-button @click="exportToExcel">导出</el-button>
</template>
<script>
import * as XLSX from 'xlsx'  //引入XLSX
//定义方法
const exportToExcel=()=>{
       const worksheet = XLSX.utils.json_to_sheet(props.list);  //table中的数据
    // 可以解决数据在excel中被转换成科学计数法
    const range = XLSX.utils.decode_range(worksheet['!ref']);
    for (let row = range.s.r; row <= range.e.r; row++) {
        for (let col = range.s.c; col <= range.e.c; col++) {
        const cell = worksheet[XLSX.utils.encode_cell({ r: row, c: col })];
        if (cell && cell.t === 'n') {
            cell.t = 's';
        }
        }
    }
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      /*生成文件*/
    XLSX.writeFile(workbook, '数据测试表.xlsx');
}
</script>

第二种方法使用 Bold()方法，需要后端来配合实现

首先要调用后端的接口，然后使用 Bold（）实现现在

注意：responseType要设置为"blod" 将数据转换成二进制格式

 /*导出*/
exportLoansHistory(){
axios.get('/tsinghuasearch/primo/exportLoansHistory'{responseType:'blod'}).then((res)=>{
        if(res.status===200){
          let data = res.data;
             this.download(data)
        }
    })
},

/*下载*/
download(data) {
if (!data) {
return
}
let url = window.URL.createObjectURL(new Blob([data],{type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', '测试.xlsx')
document.body.appendChild(link)
link.click()
URL.revokeObjectURL(link.href);
document.body.removeChild(link);
},