vue 通过url 文件下载 更改自定义文件名称

文章目录

• • 概要
  • 整体代码展示
  • 小结

概要

方法概括：

1. a 标签简单设置 href 方式

2. a 标签使用 blob 数据类型方式

整体代码展示

  <el-link
  :underline="false"
   type="primary"
   style="font-size: 12px; margin-left: 10px"
   @click="download(scope.row)"
   >下载</el-link>

   download(row) {
    这里拼接了下载地址url 传给封装的getBlob 进行Blob 抛下载方法
    let url = row.fileCctpath + row.fileCctkey
    this.getBlob(url).then((blob) => {
    抛送返回结果传给封装的 saveAs 方法进行更改文件名称下载
     blob抛送返回数据  row.fileName 自定义下载名称
    this.saveAs(blob, row.fileName);
    });
    },

   这里使用了两种方法进行抛送下载 任选其一即可 
    返回数据格式都是一致的 size 文件大小 type 文件类型 
     async getBlob(url) {
   第一种 使用了fetch 进行抛送
      const response = await fetch(url, {
        method: "GET",
        credentials: "include",
        // mode: "no-cors", // 这里设置为 no-cors
      });
      if (response.ok) {
        return await response.blob();
      } else {
        throw new Error("Network response was not ok.");
      }
   第二种 使用了 new XMLHttpRequest() 进行抛送
      return new Promise((resolve) => {
       const xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.responseType = "blob";
        xhr.withCredentials = true;
        xhr.onload = () => {
         console.log(xhr, "xhr");
        if (xhr.status === 200) {
           resolve(xhr.response);
          }
       };
      xhr.send();
      });
    },
 
   进行文件下载更换自定义文件名
   saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
        对于 IE 和 Edge
        navigator.msSaveBlob(blob, filename);
      } else {
        对于其他现代浏览器
        const link = document.createElement("a");
        const body = document.querySelector("body");
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
        link.style.display = "none";
        body.appendChild(link);
        link.click();
        body.removeChild(link);
        释放内存
        window.URL.revokeObjectURL(link.href);
      }
    },

   

  <el-link
  :underline="false"
   type="primary"
   style="font-size: 12px; margin-left: 10px"
   @click="download(scope.row)"
   >下载</el-link>

   第二种方法直接抛送下载 但是有个缺陷 需要是同源 不支持跨域 需要配置跨域
   download(row) {
    let url = row.fileCctpath + row.fileCctkey
    this.saveAs(blob, row.fileName);
    },

   saveAs(blob,fileName){
   这里可以进行 跨域设置 
   let u =
        "/hanmpsc" +
        blob.substr(
          "你的域名地址".length,
          blob.length - "你的域名地址".length
        );

     let a = document.createElement("a");
      a.href = u;
      a.download = fileName; //文件名
      a.target = "_blank";
      a.click();

   }
   vue.config.js 里进行配置跨域存储桶服务器地址 
     '/hanmpsc': {
        target: 'http://********', // 新存储桶服务器的地址
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/hanmpsc': '', // 去掉路径中的 /srmc
        },
      }

小结

getBlob(url)

• 功能：该方法用于通过给定的 URL 获取文件的 Blob 对象。
• 参数：
  • url：要请求的文件的 URL。
• 实现：
  • 创建一个新的 Promise，用于异步处理。
  • 使用 XMLHttpRequest 对象发起一个 GET 请求，请求的响应类型设置为 blob。
  • 在请求成功（状态码为 200）时，调用 resolve 方法将响应的 Blob 对象返回。

2. upload(url, name)

• 功能：该方法用于下载指定 URL 的文件，并将其命名为指定的文件名。
• 参数：
  • url：要下载的文件的 URL。
  • name：下载后文件的名称。
• 实现：
  • 调用 getBlob(url) 方法获取 Blob 对象。
  • 创建一个 <a> 标签，用于触发文件下载。
  • 使用 window.URL.createObjectURL(blob) 创建一个指向 Blob 对象的 URL。
  • 设置 <a> 标签的 href 属性为 Blob URL，download 属性为指定的文件名。
  • 将 <a> 标签添加到文档中，并模拟点击以触发下载。
  • 下载完成后，移除 <a> 标签，并使用 window.URL.revokeObjectURL(url) 释放 Blob URL。
• 这段代码的主要目的是通过 AJAX 请求获取文件，并利用 Blob 对象实现文件的下载功能。用户只需提供文件的 URL 和希望保存的文件名，代码便会自动处理下载过程。