axios下载文件原右扩展名答案

【问题标题】：Axios download file with original right extensionaxios下载文件原右扩展名
【发布时间】：2021-03-04 14:34:40
【问题描述】：

我有以下 vuex 下载文件的方法：

   downloadFile(context, url) {
      return new promise((resolve, reject) => {
        const method = "GET";
        axios
          .request({
            url: url,
            method,
            responseType: "blob"
          })
          .then(response => {
            let fileURL = window.URL.createObjectURL(
              new Blob([response.data]),
              {
                type: response.headers["content-type"]
              }
            );
            let fileLink = document.createElement("a");
            fileLink.href = fileURL;
            let fileName = response.headers["content-disposition"].split(
              "filename="
            )[1];
         
            fileLink.setAttribute("download", fileName);
            document.body.appendChild(fileLink);

            fileLink.click();
            fileLink.remove();
            resolve();
          })
          .catch(() => {
            reject();
          });
      });
    }

我通过 URL 链接（从 laravel API 获取）

块引用

下载的文件总是带有txt扩展名的问题

块引用

有什么方法可以获取文件扩展名？

【问题讨论】：

您的服务器未发送屏幕截图中的文件扩展名。因此，您可以 1）修复您的服务器响应以包含扩展名，或 2）从 Content-Type 推断扩展名
url 中的扩展是否传递给downloadFile？如果是这样，你也可以从那里拿走。
不，它不包含扩展名

标签： vue.js download axios blob vuex

【解决方案1】：

如果您的端点不提供扩展，您可以将其添加到fileName。所以它可能是：

-  fileLink.setAttribute("download", fileName);
+  const extention = 'pdf'; // example
+  fileLink.setAttribute("download", `${fileName}.${extention}`);

【讨论】：

我有多种类型我需要它是动态的@Adam Orlov
如果后端不会给你有关文件类型的信息，你需要以某种方式找出你自己使用的扩展名。也许基于一些header??。我已经向您展示了如何以不同的扩展名保存文件，这是您要求的?。
谢谢亲爱的，但我需要知道如何获得文件扩展名
获取不同文件时Content-Type 标头是否会发生变化？也许根据这个标题你可以弄清楚。

【解决方案2】：

您的服务器未发送屏幕截图中的文件扩展名。如果它不在downloadFile 的url 参数中，并且您无法修复服务器响应以包含它，您可以从Content-Type 中推断出它。您可以创建一个将每个内容类型链接到扩展的哈希。

删除这个：

let fileName = response.headers["content-disposition"].split(
   "filename="
)[1];

用这个替换它以捕获扩展：

const extensions = {
  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'docx',
  'application/fake': 'fake', // Just an example
  // etc. Add another line for every Content-Type
}
const contentType = response.headers["Content-Type"];
const extension = extensions[contentType];
const filename = 'file.' + extension;

这将命名每个文件 "file."

【讨论】：

有没有办法在 const 变量中定义所有扩展类型？ @丹