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

Question

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

我在客户端和服务器端做了以下事情。

我的客户端包含两个文件

1. form.js 和
2. 索引.html

客户端 表单.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，我在其中完成了以下操作

1. 通过从请求中的“Range”标头获取值，从特定字节范围查找和读取文件内容的选项
2. 在响应头中添加Accept-Range:Bytes和Access-Control-Allow-Headers:Accept-Ranges值

现在我对以下内容感到震惊

1.在哪里添加“范围”标题值？

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

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

4.我应该包含viewer.html吗？

请在这件事上给予我帮助 ！我崩溃了:-(

Answer 1

1.在哪里添加“范围”标题值？

PDF.js 检测服务器是否返回“ Accept-Ranges:Bytes ” 如果服务器返回有效的 HTTP 请求标头（根据规范），PDF.js（将中止不允许增量 XHR 的平台的主要请求，并且）将发出范围请求。

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

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

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

请参见network.js文件。

4.我应该包含viewer.html吗？

不

看起来目前提供 PDF 数据的 servlet 不支持有效的 HTTP 范围请求协议。仅仅设置“Accept-Ranges:Bytes”是不够的。查看它是如何在 PHP中实现的，或者查看以前回答的与 servlets 相关的问题。