如何使用pdf.js設置客戶端的範圍頭？

Question

我對客戶端編程頗爲陌生。我正在嘗試使用pdf.js在我的Web中查看我的PDF。按照文檔中的步驟，我嘗試使用pdf.js加載pdf。整個PDF文件正在下載一個請求。現在，我想進行漸進式加載（通過指定範圍下載）。

我在客戶端和服務器端做了以下的事情。

我的客戶包含兩個文件

1. form.js和
2. 的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; 
    } 

的d我的index.html只是用來加載上面JS（form.js）和pdf.js和pdf.worker.js文件

服務器

這包含在其中我也做一個servlet以下

1. 選項通過在請求
2. 響應heade是否加入Accept-Range:Bytes和Access-Control-Allow-Headers:Accept-Ranges值從「範圍」標頭獲得的值來搜尋和讀取從特定的字節範圍中的文件內容RS

現在，我得到擊中在下面

1.Where添加 「範圍」 報頭值？

2.如何向客戶端發送範圍請求？

3.從哪裏打這些電話？

4.我是否應該包含viewer.html？

請幫我這個！我崩潰了:-(

Answer 1

1.Where添加 「範圍」 報頭值？

PDF.js檢測，如果服務器返回 「Accept-Ranges:Bytes」 如果服務器返回有效的HTTP請求頭（per spec） ，PDF.js（將中止爲平臺，不允許增量XHR和主要請求）將發行範圍請求。

2.How從客戶端發送範圍請求？

當決定服務器可以處理範圍請求時，PDF.js通過XHR自動執行該操作。

3.從哪裏打這些電話？

請參閱network.js文件。

4.我是否應該包含viewer.html？

否

看起來像目前提供PDF數據不支持有效的HTTP範圍請求協議的servlet。只需設置「Accept-Ranges：Bytes」是不夠的。在how it's implemented in PHP處或查看以前回答的question related to servlets。