I am sending a PDF stream from my server to the client and then displaying that PDF in an <object> tag in the client. Here is my code:

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

This code seems to work correctly, however I get the following warning in my console:

Resource interpreted as Document but transferred with MIME type application/pdf

Why does it think my resource should be text/html? If I change my Content-Type header to text/html, it makes the warning go away but it obviously causes a rendering issue of the PDF. Any help would be appreciated.

I am sending a PDF stream from my server to the client and then displaying that PDF in an <object> tag in the client. Here is my code:

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

This code seems to work correctly, however I get the following warning in my console:

Resource interpreted as Document but transferred with MIME type application/pdf

Why does it think my resource should be text/html? If I change my Content-Type header to text/html, it makes the warning go away but it obviously causes a rendering issue of the PDF. Any help would be appreciated.

• javascript
• ajax
• pdf
• ecmascript-6
• mime-types

• What is the type of blob? Message at console is warning, not Error, yes? – guest271314 Commented Nov 9, 2016 at 2:22
• Hi - could you check my answer please and confirm if it works. I am after the +50 bounty if at all possible. – Vanquished Wombat Commented Nov 9, 2016 at 11:51
• Heh meh_programmer, select an answer please. – Vanquished Wombat Commented Nov 9, 2016 at 12:33

2 Answers 2

In your fetch statement you need to set a header type because the default will be document. Since you have not specified the matching content the browser is letting you know something hooky is happening.

// to stop browser plaining 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 */ });
...

Note: This is from my own evaluation research of the fetch api. I have not yet used it in anger so this is untested. I found this site useful https://davidwalsh.name/fetch.

Let me know how you get on please.

Most likely this is because there's a redirect from /pdf and/or there is no file extension.

Add this extra header:

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