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

Question

我对客户端编程很陌生。我正在尝试使用 pdf.js 在我的网站上查看我的 pdf。通过遵循文档中的步骤，我尝试使用 pdf.js 加载 pdf。整个 pdf 文件通过单个请求下载。现在，我想做渐进式加载(通过指定范围下载)。

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

我的客户端包含两个文件

1. form.js 和
2. 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，我在其中完成了以下操作

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

现在我受到以下打击

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 检测服务器是否返回“Accept-Ranges:Bytes ” 如果服务器返回有效的 HTTP 请求 header ( 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 范围请求协议(protocol)。仅设置“Accept-Ranges:Bytes”是不够的。请参阅how it's implemented in PHP或查看之前的回答 question related to servlets .