Javascript 在Chrome中打开blob objectURL_Javascript_Google Chrome_Base64_Blob

Javascript 在Chrome中打开blob objectURL

javascript google-chrome

Javascript 在Chrome中打开blob objectURL,javascript,google-chrome,base64,blob,Javascript,Google Chrome,Base64,Blob,我想在chrome浏览器（chrome 56.0.2924.87，Ubuntu14.04）的一个新选项卡中使用javascript中的window.open（fileObjectURL）打开PDF。我正在从base64编码数据创建blob，并创建如下objectURL： const fileObjectURL = URL.createObjectURL(fileBlob); let openPDF = openFile(); openPDF.next(); axios.get('/pdf',

我想在chrome浏览器（chrome 56.0.2924.87，Ubuntu14.04）的一个新选项卡中使用javascript中的

window.open（fileObjectURL）

打开PDF。我正在从base64编码数据创建blob，并创建如下objectURL：

const fileObjectURL = URL.createObjectURL(fileBlob);

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);
}

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

window.open（fileBase64Data）

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

可能这是Chrome阻止打开blob的安全问题？

原因可能是adblock扩展（我也有同样的问题）。

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

让newWindow=window.open（'/'）

您还可以使用另一个页面，如带有加载指示器的

/loading

然后您需要等待newWindow加载，您可以在此窗口中推送blob文件的url：

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

Adblock扩展不阻止它

我将其用于AJAX和ES生成器，如下所示：

const fileObjectURL = URL.createObjectURL(fileBlob);

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);
}

萨拉姆

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

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

绕开旁路adblocker

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

$object=$（“”）
$object.css
位置：'固定'
排名：0
左：0
底部：0
右：0
宽度：“100%”
身高：“100%”
$object.attr'type'，'application/pdf'
$object.attr“数据”，fileObjectURL
new_window=window.open（）
new_window.onload=->
$（new_window.document.body）。追加$object

使用普通的vanilly javascript（因为我没有jquery）

/file.html

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

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

</body>
</html>

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

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

constnewblob=newBlob（[blobData]，{type:“application/pdf”}）
您知道是否有办法在新选项卡中打开PDF并在URL中设置文件名吗？谢谢这个解决方案对我来说在Chrome和Firefox的uBlock-Origin中都是有效的。事实上，uBlockOrigin
列表名为easylist
（默认设置）有一个规则|blob:$popup
，它阻止了带有blob
方案的新链接，因为（如上面列表中的注释所述）：！与许多网站一起使用以生成多个弹出窗口（如果您知道哪些网站使用了该技巧，请告诉我！）与Firefox 75不兼容。在调用open（）
之后，会向用户显示一条警告“popup blocked”，并且newWindow
为null
；让newWindow=window.open（fileURL）这对我来说不起作用