Javascript 在 Chrome 中打开 blob objectURL
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43283454/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open blob objectURL in Chrome
提问by Michbeckable
I want to open a PDF in a new tab in chrome browser (Chrome 56.0.2924.87, Ubuntu 14.04) using window.open(fileObjectURL)in javascript. I am creating the blob from base64 encoded data and do create an objectURL like this:
我想window.open(fileObjectURL)在 javascript 中使用 chrome 浏览器（Chrome 56.0.2924.87，Ubuntu 14.04）的新标签页中打开一个 PDF 。我正在从 base64 编码数据创建 blob，并创建一个像这样的 objectURL：
const fileObjectURL = URL.createObjectURL(fileBlob);
It works fine in latest Firefox browser. But in Chrome I can see that the new tab gets opened but then closed immediately. So I don't get any error in the console etc.
The only way it works in Chrome now is to give the base64 data directly to the window.open(fileBase64Data)function. But I don't like the complete data being set in the url.
它在最新的 Firefox 浏览器中运行良好。但在 Chrome 中，我可以看到新标签页被打开但随后立即关闭。所以我在控制台等中没有收到任何错误。它现在在 Chrome 中工作的唯一方法是将 base64 数据直接提供给window.open(fileBase64Data)函数。但我不喜欢在 url 中设置完整的数据。
Maybe this is a safety issue with Chrome blocking opening of blobs?
也许这是 Chrome 阻止打开 blob 的安全问题？
回答by bol89
The cause is probably adblock extension (I had exactly the same problem).
原因可能是 adblock 扩展（我遇到了完全相同的问题）。
回答by Ablai Tursumbekov
You must open new window before you put blob url in window:
在将 blob url 放入窗口之前，您必须打开新窗口：
let newWindow = window.open('/')
let newWindow = window.open('/')
Also you can use some another page like /loading, with loading indicator.
您也可以使用其他页面，例如/loading带有加载指示符的页面。
Then you need to wait newWindow loading, and you can push url of your blob file in this window:
然后你需要等待 newWindow 加载，你可以在这个窗口中推送你的 blob 文件的 url：
newWindow.onload = () => {
newWindow.location = URL.createObjectURL(blob);
};
Adblock extension don't block it.
Adblock 扩展程序不要阻止它。
I'm using it with AJAX and ES generators like this:
我将它与 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);
}
回答by Youn Oh
Work around way to by pass adblocker.
解决绕过adblocker的方法。
coffeescript & jquery
咖啡脚本和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
回答by robrecht
In plain vanilly javascript (because I don't have jquery)
在普通的 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.htmlis an almost empty html file, source:
/file.html是一个几乎空的 html 文件，来源：
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
Tested in chrome & firefox (on 20/november/2019)
在 chrome 和 firefox 中测试（2019 年 11 月 20 日）
回答by Ali Jamal
Salaam
萨拉姆
blob:http://***.***.***.**/392d72e4-4481-4843-b0d4-a753421c0433
Blobs are not blocked by chrome but are blocked by AdBlock extension Either:
Blob 不会被 chrome 阻止，但会被 AdBlock 扩展阻止：
- Pause on this site
- Don't run on pages on this site
- Or Disable or Remove AdBlock Extension
- 在这个网站上暂停
- 不要在本网站的页面上运行
- 或禁用或删除 AdBlock 扩展
回答by Marvin Sankar
I do not have Ad blocker. Looks like setting the blob type explicitly to application/pdf will solve this issue.
我没有广告拦截器。看起来将 blob 类型显式设置为 application/pdf 将解决此问题。
const newBlob = new Blob([blobData], {type: "application/pdf"});
const newBlob = new Blob([blobData], {type: "application/pdf"});
