在 chrome IOS 选项卡上打开 base64 pdf

Posted 2023-05-09

【中文标题】在 chrome IOS 选项卡上打开 base64 pdf

【英文标题】：Open a base64 pdf on chrome IOS tab

【发布时间】：2019-05-26 15:26:03

【问题描述】：

我正在生成一个 base64 pdf，我只需要在另一个 ios chrome 选项卡中显示它。我有以下代码。

if (navigator.userAgent.includes('CriOS')) 
  var base64PDF = base64ArrayBuffer(response.data);
  var win = window.open();
  win.document.write('<iframe id="myIframe"   src="data:application/pdf;base64,' + base64PDF + '" frameborder="0" allowfullscreen ></iframe>');
  win.document.write('<script>window.open(window.document.getElementById("myIframe").src) </script>');

 else if (navigator.userAgent.includes('iPad') || navigator.userAgent.includes('iPhone')) 
  var base64PDF = base64ArrayBuffer(response.data);
  window.location.assign('data:application/pdf;base64,' + base64PDF);

该代码让我在 iframe 上显示 pdf，但是当我这样做时，window.location.href 是生成 pdf 的 url，而选项卡中的 url 是 about:blank。

所以我决定在文档中编写一个脚本，使用 iframe 的 src 执行 window.open，但我在另一个选项卡中得到一个空页面。

我正在寻找在 chrome 选项卡的 url 中设置的 data:application/pdf;base64,..... 这将向用户显示“打开方式”选项，他将拥有如下选项，通过 gmail 或邮件等发送。实际上我不能这样做，因为 url 是 about:blank 而不是有效的 PDF base64 链接。

我已经尝试过类似的东西 window.location，window.open，window.location.href，window.location.assign，以编程方式创建一个标记，然后单击它以更改HREF，并且更好地打开了关于：空白选项卡。

当我尝试时，类似于 window.location.href = 'data:application/pdf;base64,.....;return false;' , google chrome 重定向到一个新标签，url 正确，但返回 false；最后一部分或网址中的句子，以便执行错误的pdf。

我不知道为什么以编程方式您无法打开该数据：应用程序.....但如果您在此帖子中的第一个时创建iframe，并且您将使用手指向另一个选项卡拖动iframe，则将其拖到另一个选项卡，Chrome Open数据：应用程序......在标签的url中。

【问题讨论】：

最后一次写入后需要win.document.close()

我已经尝试过了，但是 window.open(url, '_blank') 总是忽略 url (base64PDF) 或其他 url，它只发生在 IOS 、 iPhone 和 iPad 中。

可能是安全问题

【参考方案1】：

var divpdf = document.createElement('div');
divpdf.innerhtml = '<object  style="display:none;" id="docuFrame" type="application/pdf"   data="' +
linkSource + '"></object>';
document.lastElementChild.appendChild(divpdf);
var frame = document.getElementById('docuFrame') as HTMLObjectElement;
window.open(frame.data);
frame.remove();
divpdf.remove();