时间戳

首页 > 解决方案 > 点击后如何从URL保存文件？

javascript - 点击后如何从URL保存文件？

问题描述

我在一些有 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>;
      }
    }
  },

标签： javascript

解决方案

你有两个选择：

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

    为此，您需要让服务器包含 HTTP 标头Content-Disposition: attachment

  • 或者，使用 JavaScript 传输文件数据，然后使用 JavaScript 将其保存到磁盘

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

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

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

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

推荐阅读