点击后如何从URL保存文件？ [复制]答案

【问题标题】：How to save a file from URL after click? [duplicate]点击后如何从URL保存文件？ [复制]
【发布时间】：2022-02-20 08:29:38
【问题描述】：

我在一些有 URL 的单元格中有一个表格，单击保存来自 URL 的文件后我需要。我找到了下载图像的示例-但它不起作用，当我单击时，我在全屏上看到图像；我需要在选择的地方保存文件后。

https://codesandbox.io/s/lucid-wave-pc69e?file=/src/App.js

表格列：

  {
    title: '3D model file',
    dataIndex: 'file',
    key: 'file',
    render: (file: string) => {
      if (file) {
        return <a href={file} onClick={(e) => e.stopPropagation()} download>Download</a>;
      }
    }
  },

【问题讨论】：

究竟是什么期望以及下载的默认浏览器设置是什么？
预计点击链接后会打开一个选择窗口——文件的保存位置，带有保存选项。
如果URL和页面不在同一个来源，很多浏览器出于安全考虑不会下载文件。

标签： javascript

【解决方案1】：

你有两个选择：

让服务器告诉浏览器应该下载文件而不是在浏览器中查看

为此，您需要让服务器包含 HTTP 标头 Content-Disposition: attachment
或者，使用 JavaScript 传输文件数据，然后使用 JavaScript 将其保存到磁盘

一旦您的 JavaScript 获取了数据，您将创建一个 <a download="DESIRED_FILENAME">，使用该数据构造一个 ObjectURL 并将其填充到 href，然后以编程方式单击锚点

第一个选项是迄今为止最简单的，并且可以在所有浏览器和平台上产生出色的结果。唯一的主要缺点是它需要在服务器上进行代码更改。更改通常很小，尽管有时现存的代码是一团糟，所以即使是简单的事情也很难。

第二个选项非常适合桌面浏览器，但对于几乎所有移动浏览器都会产生绝对糟糕的结果。而且它可能需要对服务器进行代码更改——我不知道数据是否可以以其正常的二进制文件传输，或者是否需要使用 base64 之类的东西对其进行编码以进行传输。（我只使用 base64 编码的数据，因为这是我的服务器支持的。）我还怀疑实现对于不熟悉 JavaScript 并且不知道如何进行自己研究的开发人员来说可能是一个重大挑战。

通过使用WebWorker 提供 Content-Disposition 标头，可能可以避免第二个选项的 UX 缺点，但我还没有尝试过。

【讨论】：