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

我有一个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

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

解决方案:

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

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

SQL - 更新多个表,同一列在一个查询中。

2022-9-8 8:04:35

未分类

如何将非常大的csv从AWS S3中ETL到Dynamo?

2022-9-8 8:04:37

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索