Как установить заголовок диапазона от клиента с помощью pdf.js?

Question

Я совершенно новый для программирования на стороне клиента. Я пытаюсь просмотреть мой pdf-файл в своей сети, используя pdf.js. Следуя инструкциям в документации, я попробовал загрузить pdf с pdf.js. Весь файл 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; 
    } 

в d мой index.html просто загружает выше JS (form.js) и pdf.js и pdf.worker.js файлы

SERVER

Это содержит сервлет, в котором я сделал следующие

1. Возможность искать и читать содержимое файла из определенного диапазона байтов путем получения значения из заголовка «Range» в запросе
2. добавили Accept-Range:Bytes и Access-Control-Allow-Headers:Accept-Ranges значения в Heade ответа RS

Теперь я получил ударил в следующем

1.Where добавить значение заголовка "Range"?

2. Как отправить запрос диапазона от клиента?

3.Что эти звонки были сделаны?

4. Должен ли я включать viewer.html?

Пожалуйста, помогите мне с этим! Я рухнул :-(

Answer 1

1.Where добавить "Range" значение заголовка?

pdf.js обнаруживает, если сервер возвращает "Accept-Ranges:Bytes" Если сервер возвращает запрос HTTP заголовков действует (per spec) , pdf.js (прервет основные запросы на платформах, которые не позволяют инкрементный XHR и) будут выдавать запросы диапазона.

2.How отправить запрос диапазона от клиента?

PDF.js делает это автоматически через XHR, когда он решает, что сервер может обрабатывать запросы диапазона.

3.Что эти звонки были сделаны?

См. network.js файл.

4. Должен ли я включать viewer.html?

Нет

Похоже, в настоящее время сервлета, который обеспечивает PDF данные не поддерживает допустимый протокол запроса диапазона HTTP. Просто установить «Accept-Ranges: Bytes» недостаточно. См. how it's implemented in PHP или ответьте ранее question related to servlets.