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

参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
相关文章
|
4天前
|
JavaScript
如何使用原生js实现导出的效果
如何使用原生js实现导出的效果
|
数据采集 移动开发 前端开发
如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)
最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解决方案. 笔者将分成3篇文章来复盘, 主要解决场景如下
730 0
|
4天前
|
JavaScript
点击导出所选数据(原生js)
点击导出所选数据(原生js)
12 0
|
4天前
|
JavaScript
JS导出表格
JS导出表格
|
4天前
|
JavaScript 前端开发
原生JavaScript JS导出blob后台文件流xlsx、xls文件自动下载(且规避乱码),解决导出Excel文件里面有[object Object]。
原生JavaScript JS导出blob后台文件流xlsx、xls文件自动下载(且规避乱码),解决导出Excel文件里面有[object Object]。
|
9月前
|
JavaScript 前端开发 Java
|
10月前
|
JavaScript
js实现导出
js实现导出
32 0
|
10月前
|
JavaScript
点击导出所选数据(原生js)
点击导出所选数据(原生js)
40 0
|
11月前
|
JavaScript
Node.js——http模块和导出共享
Node.js——http模块和导出共享
|
JSON 前端开发 JavaScript
JavaScript实战笔记(七) 纯前端导出CSV和JSON
JavaScript实战笔记(七) 纯前端导出CSV和JSON
350 0