关于vue+element 表格数据导出

关于vue+element 表格数据导出

1、 安装相关依赖

主要是两个依赖:(xlsx 和 file-saver)
npm install --save xlsx file-saver

2、在组件头里边引入插件(测试的时候,下边代码放到入口js文件main.js的时候没有效果,遗留问题,有待解决)(放到组件头里边能够实现效果)

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3、在对应组件里边methods里边写一个方法

exportExcel () {
  /* generate workbook object from table */
  let xlsxParam = { raw: true } // 导出的内容只做解析,不进行格式转换
  let wb = XLSX.utils.table_to_book(document.querySelector('#wl'), xlsxParam);//这里的#wl 是表格的id
  /* get binary string as output */
  let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
  try {
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '卫龙报表.xlsx');
  } catch (e)
  {
    if (typeof console !== 'undefined')
      console.log(e, wbout)
  }
  return wbout
},

ps: #wl是el-table的组件添加了一个id (自己定义),xxx.xlsx是下载的Excel表格的名字(可修改的)

4、点击导出按钮执行 exportExcel 的方法即可

<el-button @click="exportExcel" size="medium" type="success">导出</el-button>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue 2.x中使用Element UI来导入和导出Excel,你需要安装element-ui和file-saver插件。 首先,在Vue项目中使用npm或yarn安装Element UI和file-saver插件: ``` npm install element-ui file-saver --save ``` 然后,在Vue组件中引入所需的文件: ```javascript import { Button, Table } from 'element-ui' import XLSX from 'xlsx' import FileSaver from 'file-saver' ``` 在组件中,你需要定义导入和导出Excel的方法。下面是一个简单的示例: ```javascript methods: { // 导入Excel handleImportExcel(file) { const reader = new FileReader() reader.onload = (e) => { const data = new Uint8Array(e.target.result) const workbook = XLSX.read(data, { type: 'array' }) const worksheet = workbook.Sheets[workbook.SheetNames[0]] const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) // 处理导入的Excel数据 console.log(jsonData) } reader.readAsArrayBuffer(file.raw) }, // 导出Excel handleExportExcel() { const jsonData = [ ['姓名', '年龄', '性别'], ['张三', 18, '男'], ['李四', 20, '女'] ] const worksheet = XLSX.utils.aoa_to_sheet(jsonData) const workbook = XLSX.utils.book_new() XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1') const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }) const excelData = new Blob([excelBuffer], { type: 'application/octet-stream' }) FileSaver.saveAs(excelData, 'example.xlsx') } } ``` 最后,在模板中使用Element UI的Button和Table组件,分别绑定导入和导出Excel的方法: ```html <template> <div> <el-button type="primary" @change="handleImportExcel">导入Excel</el-button> <el-table :data="tableData"> <!-- 表格内容 --> </el-table> <el-button type="success" @click="handleExportExcel">导出Excel</el-button> </div> </template> ``` 这样,你就可以在Vue项目中使用Element UI来导入和导出Excel了。当用户选择一个Excel文件时,`handleImportExcel`方法将会被触发,并将Excel数据转换为JSON数据进行处理。而`handleExportExcel`方法则会将JSON数据转换为Excel文件并进行下载。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值