vue 导出 table
时间: 2023-10-02 08:12:30 浏览: 84
vue-jd-table-Vue 2的高级灵活数据表组件。功能丰富:搜索,过滤,导出,分页(传统和虚拟滚动)等等!-Vue.js开发
您可以使用Vue.js和Element UI来创建一个表格,并将其导出为Excel。首先需要引入Element UI和xlsx插件:
```
import { exportJsonToExcel } from '../vendor/Export2Excel.js'
import XLSX from 'xlsx'
import { saveAs } from 'file-saver'
```
然后在需要导出表格的组件中定义一个方法,在该方法中将表格数据转换为JSON格式,然后使用Export2Excel.js导出Excel文件。
```
methods: {
handleExport() {
import("@/vendor/Export2Excel").then(excel => {
const tHeader = [ 'Name', 'Age', 'Gender', 'Address' ]
const filterVal = [ 'name', 'age', 'gender', 'address' ]
const list = this.tableData
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader,
data,
filename: `table-${Date.now()}`,
autoWidth: this.autoWidth,
bookType: this.bookType
})
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
}
```
这里的tHeader和filterVal是用于表头和过滤的字段数组。tableData是要导出的数据数组,formatJson方法是将数据转换为导出格式。最后使用export_json_to_excel方法导出Excel文件即可。
阅读全文