1. 前言

1.导出也是常用的

---

2. 获取文件名字

  getExportFileName(fileName) {
      // return fileName + new Date().getTime();
      return fileName + this.$fn.moment().format("YYYYMMDDHHmmss");
    },

1. moment

---

3. 请求封装

    // method:get post  url:请求url  params：参数  fileType：pdf excel
    exportFun(method, url, params, fileName, fileType) {
      let vm = this;
      vm.$refs.ExportLoadingRef.show();
      vm.cPercent = 0;
      request({
        method: method ? method : "get",
        url,
        params,
        responseType: "blob",
        onDownloadProgress: (progressEvent) => {
          //只要设置后台的代码  response.setContentLengthLong(文件长度); 就可以了
          this.cPercent = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          // console.log(this.cPercent);
          if (this.cPercent == 100) {
            setTimeout(() => {
              this.$refs.ExportLoadingRef.close();
            }, 500);
          }
        },
      })
        .then((res) => {
          if (res.status == 200) {
            if (res.data.size == 0) {
              setTimeout(() => {
                vm.$refs.ExportLoadingRef.close();
              }, 1000);
              vm.$message.error("数据获取失败");
              return;
            }
            let fileReader = new FileReader();
            fileReader.readAsText(res.data);
            fileReader.onload = function (result) {
              try {
                let jsondata = JSON.parse(result.target.result);
                if (jsondata.code != 0) {
                  vm.$message.error(jsondata.msg);
                  return;
                }
              } catch {
                vm.$printFn.downloadFile(
                  res.data,
                  vm.getExportFileName(fileName),
                  fileType ? fileType : "pdf"
                );
              }
            };
          } else {
            this.$refs.ExportLoadingRef.close();
            // this.$message.error("数据解析失败");;
          }
        })
        .catch((error) => {
          this.$refs.ExportLoadingRef.close();
          console.log(error);
        });
    },

1. ExportLoadingRef 封装的进度条插件
2. responseType 配置
3. onDownloadProgress 配置

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉