在 Chrome 中打开 blob objectURL

Question

我想在 chrome 浏览器（Chrome 56.0.2924.87，Ubuntu 14.04）的新选项卡中使用 javascript

window.open(fileObjectURL)

打开 PDF。我正在从 base64 编码数据创建 blob，并创建一个像这样的 objectURL：

const fileObjectURL = URL.createObjectURL(fileBlob);

在最新的 Firefox 浏览器中运行良好。但在 Chrome 中，我可以看到新标签页被打开但随后立即关闭。所以我在控制台等中没有收到任何错误。它现在在 Chrome 中工作的唯一方法是将 base64 数据直接提供给

window.open(fileBase64Data)

函数。但我不喜欢在 url 中设置完整的数据。

也许这是 Chrome 阻止打开 blob 的安全问题？

Answer 1

87
投票

原因可能是 adblock 扩展（我有完全相同的问题）。

Answer 2

在将 blob url 放入窗口之前，您必须打开新窗口：

let newWindow = window.open('/')

您还可以使用其他页面，例如

/loading

，带有加载指示器。

然后你需要等待 newWindow 加载，你可以在这个窗口中推送你的 blob 文件的 url:

newWindow.onload = () => {
    newWindow.location = URL.createObjectURL(blob);
};

Adblock 扩展不要阻止它。

我将它与 AJAX 和 ES 生成器一起使用，如下所示：

let openPDF = openFile();
openPDF.next();
axios.get('/pdf', params).then(file => {
  openPDF.next(file);
});

function* openFile() {
  let newWindow = window.open('/pages/loading');
  // get file after .next(file)
  let file = yield;
  // AJAX query can finish before window loaded,
  // So we need to check document.readyState, else listen event
  if (newWindow.document.readyState === 'complete') {
    openFileHelper(newWindow, file);
  } else {
    newWindow.onload = () => {
      openFileHelper(newWindow, file);
    };
  }
}

function openFileHelper(newWindow, file) {
  let blob = new Blob([file._data], {type: `${file._data.type}`});
  newWindow.location = URL.createObjectURL(blob);
}

Answer 3

绕过广告拦截器的方法。

咖啡脚本和 jquery

$object = $("<object>")
$object.css
  position: 'fixed'
  top: 0
  left: 0
  bottom: 0
  right: 0
  width: '100%'
  height: '100%'
$object.attr 'type', 'application/pdf'
$object.attr 'data', fileObjectURL
new_window = window.open()
new_window.onload = ->
  $(new_window.document.body).append $object

Answer 4

萨拉姆

blob:http://***.***.***.**/392d72e4-4481-4843-b0d4-a753421c0433

Blobs 不会被 chrome 屏蔽但是会被 AdBlock 扩展屏蔽要么：

在此站点暂停
不要在本网站的页面上运行
或禁用或删除 AdBlock 扩展

Answer 5

在普通的 javascript 中（因为我没有 jquery）

let newWindow = window.open('/file.html');
newWindow.onload = () => {
    var blobHtmlElement;
    blobHtmlElement = document.createElement('object');
    blobHtmlElement.style.position = 'fixed';
    blobHtmlElement.style.top = '0';
    blobHtmlElement.style.left = '0';
    blobHtmlElement.style.bottom = '0';
    blobHtmlElement.style.right = '0';
    blobHtmlElement.style.width = '100%';
    blobHtmlElement.style.height = '100%';
    blobHtmlElement.setAttribute('type', 'application/pdf'); 
    blobHtmlElement.setAttribute('data', fileObjectURL);
    newWindow.document.title = 'my custom document title';
    newWindow.document.body.appendChild(blobHtmlElement);
};

/file.html

是一个几乎是空的html文件，来源：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

</body>
</html>

在 chrome 和 firefox 中测试（2019 年 11 月 20 日）

Answer 6

不幸的是，上述解决方案均无效。新窗口在生产中仍然被阻止，在开发中它可以工作。只有 Chrome 块，在 Edge 中一切正常。

Answer 7

我没有广告拦截器。看起来将 blob 类型显式设置为 application/pdf 将解决此问题。

const newBlob = new Blob([blobData], {type: "application/pdf"});

Answer 8

完成，我刚刚添加了 {type:"application/pdf"} 或者您只需添加任何内容类型。

在 Chrome 中打开 blob objectURL

问题描述投票：0回答：8

8个回答

最新问题

在 Chrome 中打开 blob objectURL

问题描述 投票：0回答：8

8个回答

最新问题

问题描述投票：0回答：8