JavaScriptのwindow.open(fileObjectURL)
を使用して、PDF browser(Chrome 56.0.2924.87、Ubuntu 14.04)の新しいタブでchromeを開きたい。base64でエンコードされたデータからblobを作成し、次のようなobjectURLを作成します。
_const fileObjectURL = URL.createObjectURL(fileBlob);
_
最新のFirefoxブラウザで正常に動作します。しかし、Chromeでは、新しいタブが開かれ、すぐに閉じられることがわかります。したがって、コンソールなどでエラーは表示されません。Chromeでは、base64データをwindow.open(fileBase64Data)
関数に直接提供するようになりましたが、URLに完全なデータが設定されているのは好ましくありません。
たぶん、これはChromeブロブの開口をブロックする安全問題ですか?
原因はおそらくadblock拡張機能です(まったく同じ問題がありました)。
ウィンドウに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);
}
アドブロッカーを回避する方法を回避します。
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