天天看點

前端實作導出功能

1.前端實作導出原理:首先需要拿到需要導出的資料,然後執行導出方法

downLoad() {
 //在這裡拿到要導出的資料
      this.downloadLoading = true;
      let params = {
        ...JSON.parse(JSON.stringify(this.formInline)),
        pageSize: 99999999999,
        pageIndex: 0,
      };
      if (params.order_time && params.order_time.length > 0) {
        params.start_time = params.order_time[0];
        params.end_time = params.order_time[1];
      }
      delete params.order_time;
      situationList(params)
        .then((res) => {
          import("@/vendor/Export2Excel").then((excel) => {
            const tHeader = this.labelList.map((row) => row.label);
            const filterVal = this.labelList.map((row) => row.value);
            const data = this.formatJson(filterVal, res.data);
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: "供應商采購資料",
              autoWidth: this.autoWidth,
              bookType: this.bookType,
            });
          });
        })
        .finally(() => {
          this.downloadLoading = false;
        });
    },```

```bash
 formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
           

遇到比較不和諧的後端,什麼都要前端來做,那也不用怕,後端可以做的前端一樣可以做

繼續閱讀