从 url react 下载 PDF

Question

我在 Google Cloud Storage 中有一个可公开访问的 PDF 网址。我希望能够在反应中创建一个按钮/链接，允许用户将此 PDF 下载到他们自己的计算机上。我想知道执行此操作的最佳方法是什么以及哪些库会有所帮助？有这方面的文件吗？谢谢

Answer 1

为了强制下载文件，您有多种选择。首先，最简单的方法是使用锚标签的download 属性：

<a href="foo.pdf" download target="_blank">PDF</a>

但是，IE 和许多其他早期版本的浏览器不支持此功能。但这样做的最大影响是它将在一个新标签中打开，在我看来这是优雅的退化。请参阅full list of supported versions。

如果这还不够，您必须在服务器端进行一些更改。您可以通过多种方式配置服务器，但例如，.htaccess 文件可以具有以下内容：

<Files *.pdf>
    Header set Content-Disposition attachment
</Files>

Answer 2

您可以动态生成链接或按钮。以下片段：

var sampleBytes = new Int8Array(4096); // In your case it should be your file

var saveByteArray = (function () {
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";

  return function (data, name) {
    var blob = new Blob(data, {type: "octet/stream"}), // or application/pdf
        url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = name;
    a.click();
    window.URL.revokeObjectURL(url);
  };
}());

saveByteArray([sampleBytes], 'example.txt'); // You can define the filename