1. 程式人生 > 實用技巧 >vue中通過Export2Excel導成excel

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>