1、下载依赖:

npm install --save xlsx file-saver

2、新建一个js文件夹放编写的js
在这里插入图片描述
outToExcel.js代码,复制即可使用:

import FileSaver from 'file-saver';
import * as XLSX from 'xlsx'
export default {
    // 导出Excel表格
    exportExcel(name, tableName) {
        //name表示生成excel的文件名     tableName表示表格的id
        var sel = XLSX.utils.table_to_book(document.querySelector(tableName))
        var selIn = XLSX.write(sel, { bookType: 'xlsx', bookSST: true, type: 'array' })
        try {
            FileSaver.saveAs(new Blob([selIn], { type: 'application/octet-stream' }), name)
        } catch (e) {
            if (typeof console !== 'undefined') console.log(e, selIn)
        }
        return selIn
    }
};

3、main.js里面引入刚刚写好的那个js文件

vue2.0写法

//全局导出excel
import 文件名 from 刚刚写好的那个js文件的路径
Vue.prototype.outToExcels(取名随意) = 文件名;

vue3.0写法

import 文件名from 路径;
createApp(App).config.globalProperties.outToExcels(取名随意) = 文件名;

4、methods方法调用
在这里插入图片描述
在这里插入图片描述

此处报错,上面的代码已改正

如果使用Element-UI组件, 导出Table表格可能报错 TypeError: Cannot read properties of undefined (reading ‘utils‘)

解决办法:把import XLSX from 'xlsx’变成import * as XLSX from ‘xlsx’

然后就是奇迹时刻了:
在这里插入图片描述
撒花🎉

参考教程:https://blog.csdn.net/qianxizq/article/details/118637262?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-0.pc_relevant_paycolumn_v3&spm=1001.2101.3001.4242.1&utm_relevant_index=3

Logo

前往低代码交流专区

更多推荐