在Chrome中打开blob objectURL

z6psavjg 于 2023-04-27 发布在 Go

关注(0)|答案(8)|浏览(201)

我想在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的安全问题？

google-chrome

来源：https://stackoverflow.com/questions/43283454/open-blob-objecturl-in-chrome

8条答案

按热度按时间

pcrecxhr1#

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

赞(0）回复(0）举报 2023-04-27

bxpogfeg2#

你必须打开新窗口，然后才能将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);
}

赞(0）回复(0）举报 2023-04-27

kiayqfof3#

工作方式绕过广告拦截器。
coffeescript & 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

赞(0）回复(0）举报 2023-04-27

k4emjkb14#

萨拉姆

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

Blob不会被chrome阻止，但会被AdBlock扩展阻止：

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

赞(0）回复(0）举报 2023-04-27

ldxq2e6h5#

在普通的vanilly 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日）

赞(0）回复(0）举报 2023-04-27

wb1gzix06#

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

赞(0）回复(0）举报 2023-04-27

gev0vcfq7#

我没有广告拦截器。看起来将blob类型显式设置为application/pdf将解决这个问题。
const newBlob = new Blob([blobData], {type: "application/pdf"});

赞(0）回复(0）举报 2023-04-27

pb3skfrl8#

完成了，我只是添加了**{type：“application/pdf”}**，或者您只是添加任何内容类型。

赞(0）回复(0）举报 2023-04-27

我来回答

在Chrome中打开blob objectURL

8条答案

相关问题

热门标签

最新问答