Question

我正在从我的服务器向客户端发送PDF流，然后在客户端的<object>标记中显示该PDF。这是我的代码：

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的呈现问题。任何帮助将不胜感激。

Answer 1

在fetch语句中，您需要设置标题类型，因为默认值为document。由于您尚未指定匹配的内容，因此浏览器会让您知道正在发生的事情。

// 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 */ });
...

注意：这是我自己对fetch api的评估研究。我还没有在愤怒中使用它，所以这是未经测试的。我发现这个网站很有用https://davidwalsh.name/fetch。

请告诉我你的表现。

Answer 2

这很可能是因为/ pdf中存在重定向和/或没有文件扩展名。

添加此额外标题：

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

错误：资源被解释为Document但是使用MIME类型application / pdf进行传输

2 个答案: