js导出

简介: js导出

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 配置

参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
5月前
|
JavaScript
如何使用原生js实现导出的效果
如何使用原生js实现导出的效果
|
4月前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
165 0
|
4月前
|
JavaScript 前端开发
JS导出excel功能
JS导出excel功能
|
5月前
|
JavaScript
细讲Node.js模块化,以及 CommonJS 标准语法导出和导入,详细简单易懂!
细讲Node.js模块化,以及 CommonJS 标准语法导出和导入,详细简单易懂!
|
5月前
|
JSON JavaScript 前端开发
使用JavaScript和XLSX.js将数据导出为Excel文件
使用JavaScript和XLSX.js将数据导出为Excel文件
323 0
|
5月前
|
存储 JavaScript 前端开发
JavaScript中表格文件导出功能详解
JavaScript中表格文件导出功能详解
|
5月前
|
JavaScript
点击导出所选数据(原生js)
点击导出所选数据(原生js)
33 0
|
5月前
|
JavaScript
JS导出表格
JS导出表格
|
5月前
|
JavaScript 前端开发
原生JavaScript JS导出blob后台文件流xlsx、xls文件自动下载(且规避乱码),解决导出Excel文件里面有[object Object]。
原生JavaScript JS导出blob后台文件流xlsx、xls文件自动下载(且规避乱码),解决导出Excel文件里面有[object Object]。
|
11月前
|
JavaScript 前端开发 Java
前端js实现打印(导出)excel表格
前端js实现打印(导出)excel表格
103 0