如何使用pdf.js从客户端设置范围标题？(How to set range header from client with 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响应标头中的Access-Control-Allow-Headers:Accept-Ranges值 
 
 
 现在我对以下内容感到震惊 
 
 
 
 1.在哪里添加“Range”标头值？ 
 
 
 2.如何向客户发送范围请求？ 
 
 
 3.从哪里打电话？ 
 
 
 我应该包括viewer.html吗？ 
 
 
 请在这件事上给予我帮助 ！ 我崩溃了:-( 

I am quite new to client side programming. I am trying to view my pdf in my web using pdf.js. By following the steps in documentation i tried loading pdf with pdf.js. The entire pdf file is getting downloaded in a single request. Now, I would like to do progressive loading (downloading by specifying the range).
 
I have done the following things at my client and server side.
 
My client contains two files 
 
 
 
form.js and
 
 
index.html
 
 
CLIENT 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;
  }
 
and my index.html just loads the above js (form.js) and pdf.js and pdf.worker.js files
 
SERVER
 
This contains a servlet in which i have done the following
 
 
 
Option to seek and read the file content from specific byte range by obtaining value from "Range" header in the request
 
 
Have added Accept-Range:Bytes and Access-Control-Allow-Headers:Accept-Ranges values in response headers
 
 
Now I got struck in the following
 
 
 
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?
 
 
Please help me with this ! I'm collapsed :-(

原文：https://stackoverflow.com/questions/40620638