Javascript 如何使用pdf.js从客户端设置范围标头？

我对客户端编程非常陌生。我正在尝试使用pdf.js在我的网站上查看我的pdf。按照文档中的步骤，我尝试用pdf.js加载pdf。整个pdf文件将在一次请求中下载。现在，我想进行渐进加载（通过指定范围进行下载）

我在客户端和服务器端完成了以下工作

我的客户机包含两个文件

form.js和

index.html

客户端 form.js

'use strict';
var PDF_PATH = ""; //Path of pdf file in web
var PAGE_NUMBER = 1;
var PAGE_SCALE = 1.5;

function renderPage(div, pdf, pageNumber, callback) {
        pdf.getPage(pageNumber).then(function(page) {
        var scale = 1.5;
        var viewport = page.getViewport(scale);

        var pageDisplayWidth = viewport.width;
        var pageDisplayHeight = viewport.height;

        var pageDivHolder = document.createElement('div');
        pageDivHolder.className = 'pdfpage';
        pageDivHolder.style.width = pageDisplayWidth + 'px';
        pageDivHolder.style.height = pageDisplayHeight + 'px';
        div.appendChild(pageDivHolder);

        // Prepare canvas using PDF page dimensions
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        canvas.width = pageDisplayWidth;
        canvas.height = pageDisplayHeight;
        pageDivHolder.appendChild(canvas);

       // Render PDF page into canvas context
       var renderContext = {
        canvasContext: context,
        viewport: viewport
       };
       page.render(renderContext).promise.then(callback);

       // Prepare and populate form elements layer
       var formDiv = document.createElement('div');
       pageDivHolder.appendChild(formDiv);
    
 //setupForm(formDiv, page, viewport);
  });
}


function pageLoaded() {
PDFJS.disableWorker = true;
PDFJS.workerSrc = "./pdf.worker.js";   // no i18n
PDFJS.getDocument({url: PDF_PATH}).then(function (pdf) {

        var canvas = document.createElement("canvas");
        canvas.setAttribute("id", "pageCanvas");
        canvas.setAttribute('style', "display:none");
        document.body.appendChild(canvas);

        // Rendering all pages starting from first
         var viewer = document.getElementById('viewer');
         var pageNumber = 1;
         renderPage(viewer, pdf, pageNumber++, function pageRenderingComplete() {
                if (pageNumber > pdf.numPages) {
                return; // All pages rendered
                }
                // Continue rendering of the next page
                renderPage(viewer, pdf, pageNumber++, pageRenderingComplete);
        });
});
}

document.addEventListener('DOMContentLoaded', function () {
  if (typeof PDFJS === 'undefined') {
    alert('Built version of PDF.js was not found.\n' +
          'Please run `gulp generic`.');
    return;
  }

我的index.html只加载上面的js（form.js）、pdf.js和pdf.worker.js文件

服务器

这包含一个servlet，我在其中执行了以下操作

通过从请求中的“range”头获取值，从特定字节范围中查找和读取文件内容的选项

在响应头中添加了

Accept Range:Bytes

和

Access Control Allow Headers:Accept Ranges

值

现在我在以下几点上被击中了

1.在何处添加“范围”标题值

2.如何从客户端发送范围请求

3.这些电话是从哪里打的

4.我应该包括viewer.html吗

请帮我做这个！我崩溃了：-(

1.在何处添加“范围”标题值

PDF.js检测服务器是否返回“”，如果服务器返回有效的HTTP请求头（），PDF.js（将中止不允许增量XHR的平台的主请求，并发出范围请求）

2.如何从客户端发送范围请求

当PDF.js决定服务器可以处理范围请求时，它会通过XHR自动执行该操作

3.这些电话是从哪里打的

见文件

4.我应该包括viewer.html吗

没有

---

看起来当前提供PDF数据的servlet不支持有效的HTTP范围请求协议。仅设置“Accept Ranges:Bytes”是不够的。请参阅或检查前面的回答。

请参阅作为参考我不知道PHP@async5。听起来对我来说很陌生：-（你能和我分享一些其他的链接吗？…你的问题是关于java的可恢复下载（不是PDF或PDF.js）。请参阅Yes@async5。我想这类似于可恢复下载，因为pdf.js可以通过指定

范围

头值来选择

渐进下载

。我不知道在客户端的何处设置它…FWIW客户端代码看起来很合理。您不必在客户端执行任何操作。如果HTTP范围请求正常工作正确地说--PDF.js将只使用它们。它必须是服务器端的“Accept Ranges”@async5，这是我错过的。我将它添加为“Accept Range”，而不是：-（请用“Accept Ranges”编辑答案…。它可能对我们所有人都有用。。