我们有一个应用程序运行在我们使用 PDF 的地方,但由于客户使用的 PDF 的大小,我们遇到了缓存问题。决定检查流式传输/使用范围请求来下载 PDF。
这是我看到的:
accept-ranges: bytes
access-control-allow-credentials: true
access-control-allow-headers: Authorization, Content-Type, body, Content-Length, Accept-Ranges, Range
access-control-allow-methods: GET,POST,PUT,DELETE
access-control-allow-origin: http://example.test
access-control-max-age: 1000
cache-control: max-age=31536000
content-length: 185124353
content-type: application/pdf
date: Thu, 05 Dec 2019 14:03:42 GMT
etag: "some-etag-that-works-nicely"
有很多 CORS,因为我现在在本地运行它,在我考虑将它推到开发环境之前。我想我们已经添加了所有必需的 header 以使 PDF.js 检测到我们支持范围调用,但它似乎无法正常工作。
当我潜入 PDFJS-dist/build/pdf.js
在线文件 23744
( v2.3.200
) 我看到了这个:
if (getResponseHeader('Accept-Ranges') !== 'bytes') {
return returnValues;
}
这让我想到;也许这个getResponseHeader()
thing 是区分大小写的,出于某种原因,我无法让 API 以我们习惯的整洁的混合大小写响应其 header 。所以我决定稍微修改一下,让它的 returnValues 返回 allowRangeRequests = true
.
这个工作排序,然后我看到一个 200 OK
具有与上面相同的 header (在本地工作时在 OPTIONS
之后),应该取消但没有取消,然后是一堆带有 206 PARTIAL
的新调用增量 range: byte=0-65000
等等标题看起来像这样:
REQUEST
range: bytes=0-65535
//...and other headers of course, omitted for brevity.
RESPONSE
accept-ranges: bytes
access-control-allow-credentials: true
access-control-allow-headers: Authorization, Content-Type, body, Content-Length, Accept-Ranges, Range
access-control-allow-methods: GET,POST,PUT,DELETE
access-control-max-age: 1000
cache-control: max-age=31536000
content-length: 65536
content-type: application/pdf
等等,这也在 View 中为我提供了实际工作的 PDF(或至少几页);所以这表明它至少部分有效。
现在为什么我需要“破解”这个,我缺少哪些 header 让 PDF.js 检测到我们确实支持范围,因为它似乎已正确实现?这也是为什么它不会在没有 range: bytes=0-65535
的情况下取消初始提取的原因吗?因为另一部分“范围支持检测”?
最佳答案
我们已经让它工作了,看来 PDFjs 内部实现对标题非常挑剔。当您将它与 CORS 结合使用时(因此您首先调用了 OPTIONS
),它似乎根本无法获取正确的 header 。这可能是一个错误,但我没有花时间调查并确定我们应该报告它。
其次,HTTP2 SPDY 协议(protocol)使所有 header 都小写,PDFJS 所依赖的内部实现似乎对区分大小写的 header 很挑剔。当我们禁用 HTTP2 SPDY 并在没有 CORS 的情况下重试时,我们让它正常工作。
关于PDF.js 无法获得范围/流式 PDF 的工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59197044/