下载的几种情况

最新推荐文章于 2024-08-02 13:35:44 发布

逐渐秃头的女子

最新推荐文章于 2024-08-02 13:35:44 发布

阅读量72

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_43714712/article/details/134648603

版权

下载的几种方式

前端本地文件下载

//activeNameProp 指的文件可以变化的前缀名字，根据需求写死名字也可

> url:是文件地址

download() {
      let url = '';
      if(this.activeNameProp == '数据资源') {
         url = '数据资源模板.xlsx';
      }
      if(this.activeNameProp == '模型资源') {
        url = '模型资源模板.xlsx';
      }
      if(this.activeNameProp == '知识资源') {
         url = '知识资源模板.xlsx';
      }
      if(url) {
        let fileName = this.activeNameProp + '条目报表.xlsx';
        const a = document.createElement('a');
        const name = fileName || '';
        a.href = url;
        a.download = name;
        a.click();
        a.remove();
      }
    },

后端导出

后端返的文件流

 axios({
             method: "get",
             url: `${process.env.VUE_APP_BASE_API}/metadata/basin/getMetaCatalogExport`,
             async: true,
             params:this.form,
             headers: {
             "Content-Type": "application/json;charset=utf-8",
             Authorization: getToken(),
             },
             responseType: 'blob'
      }).then(response => {
    const blob = new Blob([response.data]);
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'XXX.xlsx';
    link.click();
  });

走后端的接口1


> url:文件地址

 downloadURl(url) {
       this.$message.info('开始下载文件')
        this.$refs.downloadRef.download(url);
      axios({
        url: process.env.VUE_APP_BASE_API + "/v1/minio/tasks/download",
        method: "post",
        data: { identifier: url },
        responseType: "blob",
        headers: {
          authorization: getToken(),
        },
      }).then((res) => {
        const link = document.createElement("a"); // 创建a标签
        var index = url.lastIndexOf("/");
        var suffix = url.substring(index + 1);
        link.download = suffix; //res.headers["content-disposition"] &&  decodeURIComponent(res.headers["content-disposition"].split("=")[1]);
        link.href = window.URL.createObjectURL(
          new Blob([res.data], { type: "application/octet-stream" })
        );
        link.click();
        // URL.revokeObjectURL(url); // 释放内存
      });
    },

走后端的接口2

 download(url) {
 > url:文件地址
      this.$message.info('开始下载文件,请等待！')
        // getLink(url).then((res) => {    //word
        //       const filestream=res.replace('http: //','http://')  // 返回的文件流
                axios({
                  url: process.env.VUE_APP_BASE_API + "/common/download/resource",
                  method: "get",
                  params: { resource: url },
                  responseType: "blob",
                  headers: {
                    authorization: getToken(),
                  },
                }).then((res) => {
                  const link = document.createElement("a"); // 创建a标签
                  var index = url.lastIndexOf("/");
                  var suffix = url.substring(index + 1);
                  link.download = suffix; //res.headers["content-disposition"] &&  decodeURIComponent(res.headers["content-disposition"].split("=")[1]);
                  link.href = window.URL.createObjectURL(
                    new Blob([res.data], { type: "application/octet-stream" })
                  );
                  link.click();
                  // URL.revokeObjectURL(url); // 释放内存
                });
                      // })
    },

走后端的接口且分片

是一个组件

<template>
  
</template>
<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import Bus from '@/utils/bus';
export default {
  data() {
    return {
      timer: null, //定时器名称
    };
  },
  watch: {},
  methods: {
    // 分段下载
    async download(downloadUrl) {
      let percentage = 0;
      let contentList = []; // 文件流数组
      let filesCurrentPage = 0; //文件开始偏移量
      let fileFinalOffset = -1; //文件最后偏移量
      // const chunkSize = 1024 * 100; // 单个分段大小，这里测试用1M
      const chunkSize = 1024 * 1024 * 20; // 单个分段大小，这里测试用1M
      let filesTotalSize = 0; // 安装包总大小，默认100M
      let filesPages = 1; // 总共分几段下载
      let res = await axios({
        method: "post",
        url: `${process.env.VUE_APP_BASE_API}/v1/minio/tasks/splitDownloadGetFileSize`,
        async: true,
        data: {
          chunkSize: 0,
          fileName: "",
          identifier: downloadUrl,
          totalSize: 0,
          // inline:'inline'
        },
        headers: {
          "Content-Type": "application/json;charset=utf-8",
          Authorization: getToken(),
        },
      });
      filesTotalSize = res.data.data;
      let sentAxios = (num) => {
        let rande = chunkSize;

        //判断是否开启了断点续传(断点续传没法并行-需要上次请求的结果作为参数)
        // if (this.breakpointResumeTags) {
        let endNum = num * chunkSize + 1;
        if (endNum > filesTotalSize) {
          endNum = "";
        }
        rande = `bytes=${Number(fileFinalOffset) + 1}-${endNum}`;
        // }
        // else {
        //   if (num) {
        //     rande = `bytes=${(num - 1) * chunkSize + 2}-${num * chunkSize + 1}`;
        //   } else {
        //     // 第一次0-1方便获取总数，计算下载进度，每段下载字节范围区间
        //     rande = "bytes=0-1";
        //   }
        // }

        let headers = {
          Range: rande,
          "Content-Type": "application/json;charset=utf-8",
          Authorization: getToken(),
        };

        axios({
          method: "post",
          url: `${process.env.VUE_APP_BASE_API}/v1/minio/tasks/splitDownload`,
          async: true,
          data: {
            chunkSize: 0,
            fileName: "",
            identifier: downloadUrl,
            // "identifier": "http://10.1.8.35:9000/htht/2023-04-24/上传文件夹.zip",
            totalSize: 0,
          },
          headers: headers,
          responseType: "blob",
        })
          .then((response) => {
            if (response.status == 200 || response.status == 206) {
              //检查了下才发现，后端对文件流做了一层封装，所以将content指向response.data即可
              const content = response.data;
              //截取文件总长度和最后偏移量
              let result = response.headers["content-range"].split("/");
              // 获取文件总大小，方便计算下载百分比
              filesTotalSize = result[1];
              //获取最后一片文件位置，用于断点续传
              fileFinalOffset = result[0].split("-")[1];
              // 计算总共页数，向上取整
              filesPages = Math.ceil(filesTotalSize / chunkSize);
              // 文件流数组
              contentList.push(content);
              // 递归获取文件数据(判断是否要继续递归)
              if (filesCurrentPage < filesPages) {
                filesCurrentPage++;
                //计算下载百分比  当前下载的片数/总片数
                percentage = Number(
                  (contentList.length / filesPages) * 100
                ).toFixed(2);
                if (percentage == 100) {
                  percentage = 0;
                  this.$notify({
                    title: "成功",
                    message: "文件下载完成！",
                    type: "success",
                  });
                }
                this.$root.$emit("percentage", percentage);
                sentAxios(filesCurrentPage);
                //结束递归
                return;
              }
              // 文件下载
              const fileName = decodeURIComponent(
                response.headers["content-disposition"].split("filename=")[1]
              );
              //构造一个blob对象来处理数据
              const blob = new Blob(contentList);
              //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
              //IE10以上支持blob但是依然不支持download
              if ("download" in document.createElement("a")) {
                //支持a标签download的浏览器
                const link = document.createElement("a"); //创建a标签
                link.download = fileName; //a标签添加属性
                link.style.display = "none";
                link.href = URL.createObjectURL(blob);
                document.body.appendChild(link);
                link.click(); //执行下载
                URL.revokeObjectURL(link.href); //释放url
                document.body.removeChild(link); //释放标签
              } else {
                //其他浏览器
                navigator.msSaveBlob(blob, fileName);
              }
            } else {
              //调用暂停方法，记录当前下载位置
              this.$notify.error({
                title: "失败",
                message: "文件下载失败，请稍后重试或联系管理员",
              });
              console.log("下载失败");
            }
          })
          .catch(function (error) {
            this.$notify.error({
              title: "失败",
              message: error || "文件下载异常，请稍后重试或联系管理员",
            });
            console.log(error);
          });
      };
      // 第一次获取数据方便获取总数
      sentAxios(filesCurrentPage);
      this.$notify({
        title: "成功",
        message: "文件开始下载！",
        type: "success",
      });
    },
  },
};
</script>