vue匯出Excel表格

倔強的烤馬鈴薯發表於2020-12-28

1.安裝匯出excel依賴

 	npm install -S file-saver xlsx
	npm install -D script-loader

2.在str資料夾中新建檔案,引入兩份檔案 Blob.js和Export2Excel.js
在這裡插入圖片描述
3.在頁面中新增匯出事件

<el-button type="success" icon="el-icon-download" @click.native.prevent='dialogFormAdd'>匯出</el-button>
import { export_excel } from '../../excel/Export2Excel' //引入檔案
export default {
	data() {
		return {
		}
	},
	methods: {
		//匯出學生資訊
			dialogFormAdd() {
				require.ensure([], () => {
					const tHeader = ['名稱', '年齡', '性別',] // 對應表格輸出的中文title
					const filterVal = ['name', 'age','gender' ,] // 對應表格輸出的資料 
					var wjname = '學生資訊';
					//請求後臺資料
					this.$api.WebExportExportCar()
						.then(res => {
							if(res.Code == 0) {
								var list = res.Data //獲取的 表格資料
								const data = this.formatJson(filterVal, list)
								export_excel(tHeader, data, wjname) // 對應下載檔案的名字
							} else {
								this.$message.warning('匯出失敗')
							}
						})
						.catch(error => {})
				})
			},
			//請求的資料跟表格的頭部一一對應
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]))
			},
	}
}

相關文章