在 Safari 上下载 base64 pdf答案

【问题标题】：Downloading base64 pdf on Safari在 Safari 上下载 base64 pdf
【发布时间】：2019-06-19 20:22:08
【问题描述】：

我有一个返回 base64 PDF 的 POST 调用。当我调用此端点时，我将其转换为 Blob，然后下载它。这适用于除 Safari 之外的所有浏览器。

openPdf = () => {

  const sendObj = {
    fakeValue: 'test'
  };

  axios.post('https://fakeendpoint.com/create-pdf', sendObj)                
    .then((res) => {
      const base64URL = res.data;
      const binary = atob(base64URL.replace(/\s/g, ''));
      const len = binary.length;
      const buffer = new ArrayBuffer(len);
      const view = new Uint8Array(buffer);

      for (let i = 0; i < len; i += 1) {
        view[i] = binary.charCodeAt(i);
      }

      // create the blob object with content-type "application/pdf"
      const blob = new Blob([view], { type: 'application/pdf' });
      const url = URL.createObjectURL(blob);

      const a = document.createElement('a');
      document.body.appendChild(a);
      a.style = 'display: none';
      a.href = url;
      a.download = 'Test.pdf';
      a.target = '_blank';
      a.click();
  });
}

我怎样才能让它在 Safari 中工作？

【问题讨论】：

请添加更多关于 Safari 出现问题的详细信息。您是否在开发者工具控制台中看到任何错误？
控制台中没有错误，在网络选项卡中我可以看到 POST 正在返回正确的数据。 PDF 永远不会下载。
它在新标签页中打开。未在设备上下载。

标签： javascript pdf safari

【解决方案1】：

似乎 Safari 不遵循 a 标签的标准。我相信this previous SO post 确定了根本原因。来自链接答案中的 cmets：

请注意，在 Safari 中指定目标属性似乎会覆盖下载属性（在 Chrome、Firefox 或 Opera 中似乎不是这种情况）。

尝试在上面的代码中删除a.target = '_blank'，然后对其进行测试。它应该工作！

很遗憾，我不确定你会如何在新标签页中打开它。

【讨论】：

行得通，谢谢！打开的新页面对下载无关紧要。

【解决方案2】：

来自我所做的测试 - 仅当 PDF 太大时才会发生这种情况。（并且仅在移动 Safari 上）我认为这与 URL 的长度有关。

删除target="_blank" 的唯一缺点是，如果用户单击“返回”，它将失去前一页的状态。

【讨论】：