Axios下载文件，原右扩展名

Question

下面是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获得)

区块报价

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

区块报价

有任何方法来获取文件扩展名？

​

Answer 1

您的服务器没有在屏幕截图中发送文件扩展名。如果它不在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;

这将命名每一个文件“文件”。

Answer 2

如果端点没有提供扩展，则可以将其添加到fileName中。所以可能是：

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