web-dev-qa-db-ja.com

エラー：リソースはドキュメントとして解釈されましたが、MIMEタイプapplication / pdfで転送されました

PDFストリームをサーバーからクライアントに送信し、そのPDFをクライアントの<object>タグに表示します。これが私のコード：

server.js

router.get('/pdf', function * () {
  var stream = getMyFileStream();
  this.set('Content-Type', 'application/pdf');
  this.response.body = stream;
});

client.js

var objectElement = document.querySelector('object');

fetch('/pdf', request)
  .then(res => res.blob())
  .then(blob => URL.createObjectURL(blob))
  .then(url => {
    objectElement.setAttribute('data', url)
    objectElement.setAttribute('type', 'application/pdf')
  })

このコードは正しく機能しているようですが、コンソールに次の警告が表示されます。

ドキュメントとして解釈されたがMIMEタイプapplication/pdfで転送されたリソース

なぜ私のリソースはtext/htmlである必要があると思いますか？ Content-Typeヘッダーをtext/htmlに変更すると、警告が表示されなくなりますが、PDFのレンダリングの問題が発生します。任意の助けいただければ幸いです。

javascriptajaxpdfecmascript-6mime-types
8
saadq

デフォルトはドキュメントになるため、フェッチステートメントでヘッダータイプを設定する必要があります。一致するコンテンツを指定していないため、ブラウザは不快なことが起こっていることを通知しています。

// to stop browser complaining use a request object to specify header
var request = new Request('/pdf', {
    headers: new Headers({
        'Content-Type': 'application/pdf'
    })
});

fetch(request)
.then(function() { /* handle response */ });
...

注：これは、フェッチAPIについての私自身の評価調査によるものです。私はまだ怒りでそれを使用していないので、これはテストされていません。このサイトは役に立ちました https://davidwalsh.name/fetch 。

どうやって乗るのか教えてください。

3
Vanquished Wombat

ほとんどの場合、これは/ pdfからのリダイレクトがあるか、ファイル拡張子がないためです。

この追加ヘッダーを追加します。

this.set('Content-Disposition', 'attachment; filename=results.pdf');
1
user6269864