[vue] XLSX 导出数据为excel

安装

bash 复制代码
npm install --save xlsx
js 复制代码
import * as XLSX from 'xlsx';
js 复制代码
exportArrayData: [
        ["序号", "英文名", "中文名"],
        ["1", "Good Morning", "早上好"],
        ["2", "Good Morning", "早上好"],
        ["3", "Good Morning", "早上好"],
        ["4", "Good Morning", "早上好"],
        ["5", "Good Morning", "早上好"]
      ]
js 复制代码
exportArrayDataToExcel() {
     const wb = XLSX.utils.book_new(); // 创建工作簿
     const ws = XLSX.utils.aoa_to_sheet(this.exportArrayData); //  创建工作表
     const cols = [];
	// 设置列宽
     for (let i = 0; i < this.exportArrayData[0].length; i++) {
       cols.push({ wch: 15 });
     }
     ws['!cols'] = cols;
     XLSX.utils.book_append_sheet(wb, ws, 'exportArrayDataToExcel');
     // 导出Excel
     XLSX.writeFile(wb, '表格.xlsx');
   },

参考:

Vue+File saver+xlsx使用aoa_to_sheet导出数据为excel

相关推荐
吴声子夜歌20 分钟前
Vue3——Vue CLI
前端·javascript·vue.js
我的世界洛天依27 分钟前
洛天依讲编程:调音教学|调性 ——MIDI 里的「钩子函数」
linux·前端·javascript
Cobyte40 分钟前
7.响应式系统比对:手写一个响应式状态库并应用在 React 上
前端·javascript·vue.js
渔舟小调40 分钟前
P18 | Element Plus 通用 CRUD 页面模板:一个模板覆盖 80% 管理页面
javascript·vue.js·elementui
1314lay_10071 小时前
匿名插槽和具名插槽的使用
前端·javascript·vue.js
A923A1 小时前
Vue 和 React 常用脚手架工具总结
前端·vue.js·react.js·脚手架
Highcharts.js1 小时前
步骤总结|使用 React + Highcharts 实现动态更新图表
前端·javascript·react.js·前端框架·highcharts·图表渲染
九转成圣1 小时前
Spring Boot 导出 Excel 最佳实践:从 POI 函数式封装到 EasyExcel 的“降维打击”
spring boot·后端·excel
好家伙VCC1 小时前
# React发散创新:从状态管理到自定义Hook的极致实践与性能优化在现代前端开发
java·javascript·python·react.js·性能优化
刀法如飞2 小时前
一款基于 NestJS 的 DDD 脚手架,开箱即用
javascript·后端·架构