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

Question

我对客户端编程还很陌生。我正在尝试使用 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，我在其中完成了以下操作

通过从请求中的“范围”header 获取值，从特定字节范围内查找和读取文件内容的选项
已添加 Accept-Range:Bytes 和 Access-Control-Allow-Headers:Accept-Ranges 值作为响应 headers

现在我被以下内容打动了

1.Where to add "Range" header value?

2.How to send range request from client?

3.From where these calls were made?

4.Should I include viewer.html?

请帮我解决这个问题！我崩溃了:-(

Answer 1

1.Where to add "Range" header value?

PDF.js 检测服务器是否 returns "Accept-Ranges:Bytes" If server returns valid HTTP request headers (per spec), PDF.js（对于不允许增量 XHR 的平台将中止主请求并且）将发出范围请求.

2.How to send range request from client?

PDF.js 在确定服务器可以处理范围请求时通过 XHR 自动执行此操作。

3.From where these calls were made?

参见 network.js 文件。

4.Should I include viewer.html?

没有

看起来目前提供PDF数据的servlet不支持有效的HTTP范围请求协议。仅仅设置“Accept-Ranges:Bytes”是不够的。参见 how it's implemented in PHP at or check previously answered question related to servlets。

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

How to set range header from client with pdf.js?

javascript

pdf

pdf.js

pdf-viewer