vue中通過Export2Excel導成excel

接口：

order.js

    export (data) {
        return xhr
            .request({
                url: '/api/order_static/exportperday',
                method: 'get',
                params: data,
                responseType: 'blob'
            })

            .catch(err => {
                console.log('err', err)
            })
    }

安裝依賴：

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

在項目src文件夾下新建文件夾vendor，將Export2Excel.js  文件放入文件夾下。

頁面中：

<el-button
    icon="el-icon-download"
    type="warning"
    :loading="downloadLoading"
    @click="handleExport()"
    v-if="$_has('export')"
>導出</el-button>

　

<script>
	import { order } from "@/api/order";
	export default {
		data() {
			return {
				downloadLoading: false,
				listLoading: false,
				listQuery: {
					Params: {
						StartDate: "",
						EndDate: ""
					},
					PageIndex: 1,
					PageSize: 10
				},
				totleNum: 0,
				list: [],
				filename: ""
			};
		},
		created() {
			this.fetchList(this.listQuery);
		},
		components: {},
		watch: {},
		mounted() {},

		methods: {
                       。。。。。。
			handleExport() {
				this.downloadLoading = true;
				const defaultSettings = require("@/settings.js");
				let url =
					defaultSettings.url +
					"api/order_static/exportperday?StartDate=" +
					this.listQuery.Params.StartDate +
					"&EndDate=" +
					this.listQuery.Params.EndDate;
				console.log(url);
				window.open(url);
				order.export(this.listQuery.Params).then(res => {
                    this.list = res.data.Data;
                });
				this.filename =
					this.listQuery.Params.StartDate +
					"-" +
					this.listQuery.Params.EndDate +
					"賬單統計";
				import("@/vendor/Export2Excel").then(excel => {
					const tHeader = [
						"日期",
						"戶數",
						"卡表氣量",
						"核算氣量",
						"現金",
						"微信",
						"農行",
						"應收",
						"實收"
                    ];
                    // 需要導出的列名
					const filterVal = [
						"Date",
						"RegionCount",
						"CardGasTotal",
						"CheckGasTotal",
						"CashTotal",
						"VXTotal",
						"NongHangTotal",
						"FeeTotal",
						"PaymentTotal"
                    ];
                    // 接口獲得的所有數據
					const list = this.list;
					const data = this.formatJson(filterVal, list);
					excel.export_json_to_excel({
						header: tHeader,
						data,
						filename: this.filename,
						autoWidth: true,
						bookType: "xlsx"
					});
					this.downloadLoading = false;
				});
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v =>
					filterVal.map(j => {
						if (j === "timestamp") {
							return parseTime(v[j]);
						} else {
							return v[j];
						}
					})
				);
			}
		}
	};
</script>