vue实现导出excel
1、下载依赖:npm install --save xlsx file-saver2、新建一个js文件夹放编写的jsoutToExcel.js代码,复制即可使用:import FileSaver from 'file-saver';import * as XLSX from 'xlsx'export default {// 导出Excel表格exportExcel(name, tableName)
·
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’
然后就是奇迹时刻了:
撒花🎉
更多推荐
已为社区贡献1条内容
所有评论(0)