首先安裝兩個依賴

1.npm install -S file-saver xlsx

2.npm install -D script-loader

將這兩個文件加入項目中，新建一個文件夾，我這里叫vendor

image.png

在項目目錄下的build下的 webpack.base/conf.js這個webpack的配置文件中的

resolve的alias中加入：

'vendor':path.resolve(__dirname,'../src/views/account/vendor'), 此處路徑寫你自己真實的文件路徑

vue3.0以上的項目放在

image.png

image.png

路徑一定要正確，不然等會兒啟動項目會報錯

接下來寫點擊事件 在導出的按鈕上綁定個點擊事件

首先要去調后臺接口獲取這些數據，這個事件就不寫了。

下面是生成表格的方法，在拿到后臺數據后調用此方法即可

methods: {

export2Excel() {

require.ensure([], () => {

const { export_json_to_excel } = require('vendor/Export2Excel');

const tHeader =

['賬單名稱', '訂單編號', '交易編號','交易類型',

'交易方式','交易金額','交易前金額', '交易后金額'

]; //創建表頭

const filterVal =

['transactionName', 'orderNum','transactionNum','transactionTypeName',

'payType','payPrice', 'transactionFrontPrice', 'transactionAftertPrice',

]; //這里是和表頭對應的內容的字段，要和后臺返回的數據的字段對應上

const list = this.exportList; //這是從后臺拿到的數據

const data = this.formatJson(filterVal, list);

export_json_to_excel(tHeader, data, '**報表'); //三個參數，表頭，經過排序后的數據，表格的名字

})

},

formatJson(filterVal, jsonData) {

return jsonData.map(v => filterVal.map(j => v[j]))

},

}

總結

以上是生活随笔為你收集整理的vue前端怎么导出图片_vue前端实现导出表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。