web-dev-qa-db-ja.com

ブロブの表示PDF Edge / IE11

Djangoアプリ（クライアントとしてHTMLを取得します）と、base64でエンコードされたPDFを表示する必要があります。 Chrome/Firefoxで期待どおりに機能する複数のアプローチを試しました。

私はDjangoを使用しているので、いくつかのテンプレートといくつかのJavaScriptがあります。

pdf_preview_embedはdivです

DataURLを埋め込む

<embed width=100% height=100% type="application/pdf" src="data:application/pdf;base64, {{ pdf }}"></embed>

データのメガをインライン化する必要がある可能性があるため、受け入れられないソリューション。 Windows 7のIE11で動作し、Windows10のEdgeおよびIE11では動作しません。

Blobを埋め込む

base64binary実装

var blob = new Blob( [Base64Binary.decode(pdf)], {'type': 'application/pdf'} );
pdfURL = URL.createObjectURL( blob );
$('#pdf_preview_embed').html(
    '<embed width=100% height=100% type="application/pdf" src="'+pdfURL+'"></embed>'
);

また、EdgeおよびIE11では機能しません。

<iframe>ブロブ

$('#pdf_preview_embed').html(
    '<iframe src="'+pdfURL+'" style="width: 100%; height: 100%;" frameborder="0" scrolling="no"></iframe>'
);

Edgeは、PDFを開くことができないと主張しており、IE11は何も表示しません。

実際にpdf.jsを使用してPDFを表示する

ここで何かが起こります。EdgeとIE11のアプリケーションではなく、blob urlOriginがnullであることがわかり、pdf.jsがそれを開くことを拒否しました。サーバーCORSは、すべてのオリジンを許可するように構成されています。私は少し迷っています。

internet-explorerpdfcorsblobmicrosoft-edge
9
Kobrar

PDF.jsのiframeにiframeURIを介してPDF）のblobをロードさせるクロスブラウザの回避策。

標準的なユースケースのblobURIの例：

/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

ファイルviewer.js：

関数webViewerOpenFileViaURL内：

次の行を変更します。

if (file && file.lastIndexOf('file:', 0) === 0) {

に：

if (file && file.lastIndexOf('file:', 0) === 0 || file && file.lastIndexOf('blob:', 0) === 0) {

そして、「Origin」がIE 11/Edgeの方法で動作しているときに、ビューアが壊れるのをさらに防ぐには：

関数validateFileURL内：

次の行を変更します。

if (fileOrigin !== viewerOrigin) {

に：

if (fileOrigin != "null" && fileOrigin !== viewerOrigin) {

これで、FF、Chrome、IE 11、およびEdgeはすべて、URLの標準blobURIを介して渡されたiframeのビューアーにPDFを表示します。

3
fartwhif

セキュリティ上の制限により、IE11ではBLOBURLは機能しません。

0
Veymana Yejjala