導(dǎo)出Excel是我們在日常開發(fā)中經(jīng)常遇到的一個需求。Vue作為一門流行的前端框架，也提供了許多開發(fā)工具來滿足開發(fā)者的需求。其中，導(dǎo)出Excel就是Vue中的一個非常常見的功能。Vue中的導(dǎo)出Excel需要引入一個第三方庫，叫做“FileSaver.js”和“xlsx.js”。本文將詳細(xì)介紹如何利用Vue導(dǎo)出為Excel。

一、引入依賴包

< pre >// 在vue-cli3.x中安裝依賴 npm install file-saver xlsx -S // 在main.js中引入 import FileSaver from 'file-saver'; import XLSX from 'xlsx'; Vue.prototype.$FileSaver = FileSaver; Vue.prototype.$XLSX = XLSX;< /pre >

二、配置數(shù)據(jù)

< pre >export default { data () { return { tableData: [ {customer_name: '顧客1', order_date: '2019-12-02', price: 100}, {customer_name: '顧客2', order_date: '2019-12-03', price: 200}, {customer_name: '顧客3', order_date: '2019-12-04', price: 300} ] } } }< /pre >

三、導(dǎo)出Excel

< pre >methods: { exportExcel () { const columns = [ {header: '客戶名稱', key: 'customer_name'}, {header: '訂單日期', key: 'order_date'}, {header: '金額', key: 'price'} ]; const tableHeader = columns.map(c =>c.header); const tableData = this.tableData.map(d =>columns.map(c =>d[c.key])); const workbook = this.$XLSX.utils.book_new(); const worksheet = this.$XLSX.utils.aoa_to_sheet([tableHeader, ...tableData]); this.$XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); this.$FileSaver.saveAs(new Blob([this.$XLSX.write(workbook, {bookType: 'xlsx', type: 'array'})]), '表格.xlsx'); } }< /pre >

四、優(yōu)化代碼

< pre >methods: { exportExcel () { const columns = [ {header: '客戶名稱', key: 'customer_name'}, {header: '訂單日期', key: 'order_date'}, {header: '金額', key: 'price'} ]; const tableData = this.tableData.map(d =>columns.map(c =>d[c.key])); const workbook = this.$XLSX.utils.book_new(); const worksheet = this.$XLSX.utils.aoa_to_sheet([columns.map(c =>c.header), ...tableData]); this.$XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); this.$FileSaver.saveAs(new Blob([this.$XLSX.write(workbook, {bookType: 'xlsx', type: 'array'})]), '表格.xlsx'); } }< /pre >

五、總結(jié)

本篇文章通過引入“FileSaver.js”和“xlsx.js”兩個依賴包，將數(shù)據(jù)轉(zhuǎn)換為Excel格式，實現(xiàn)了Vue導(dǎo)出為Excel的功能。在實現(xiàn)過程中，還省略了無用的代碼，優(yōu)化了效率。希望本文可以幫助到您，使您在實際開發(fā)中能夠更加便捷地使用Vue導(dǎo)出為Excel。