当使用Filereader API时，我如何设置下载的文件名？

Question

我有一个base64string的文档，然后我从中生成文件并提供一个下载链接。这一切都能正常工作，但是它给文件一个随机数，而不是我想要的名字。

首先，我创建了一个新的文件，就像这样。

export const urlToFile = (url, filename, type) =>
  fetch(url)
    .then(res => res.arrayBuffer())
    .then(
      buffer =>
        new File([buffer], filename, {
          type
        })
    );

export const getExportFileUrl = resp =>
  urlToFile(
    `data:${docType};base64,${resp}`,
    `Document_Filename`,
    `${docType}`
  ).then(file => file);

然后我结合Filereader和URL Api来创建下载链接，就像这样。

// This is returned from the File API.
const exportedFile = {
    name: "Document_Filename"
    lastModified: 1587577801489
    lastModifiedDate: '....'
    webkitRelativePath: ""
    size: 8243
    type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
}

handleDownloadClick = () => {
    const fileReader = new FileReader();

    fileReader.onload = () => {
        const downloadUrl = URL.createObjectURL(exportedFile);
        window.location = downloadUrl;
    };

    fileReader.readAsText(exportedFile);
};

下载的文件名是这样的：

f8477d6a-bea9-4a83-843f-26e381249b71.docx

我如何设置我自己的文件名，这在上面的实现中可能吗？

Answer 1

解决方法是利用一个锚元素而不是按钮，然后用我想要的文件名称设置下载属性，就像这样。

<a download="Name_2020_04_23_12_39" href="blob:http://domain">Download</a>