How to set range header from client with pdf.js?
<p>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).</p>
<p>I have done the following things at my client and server side.</p>
<p>My client contains two files</p>
<ol>
<li>form.js and</li>
<li>index.html</li>
</ol>
<p><strong>CLIENT</strong>
<strong>form.js</strong></p>
<pre><code>'use strict';
var PDF_PATH = &quot;&quot;; //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 = &quot;./pdf.worker.js&quot;;   // no i18n
PDFJS.getDocument({url: PDF_PATH}).then(function (pdf) {

        var canvas = document.createElement(&quot;canvas&quot;);
        canvas.setAttribute(&quot;id&quot;, &quot;pageCanvas&quot;);
        canvas.setAttribute('style', &quot;display:none&quot;);
        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 &gt; 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;
  }
</code></pre>
<p>and my <strong>index.html</strong> just loads the above js (form.js) and pdf.js and pdf.worker.js files</p>
<p><strong>SERVER</strong></p>
<p>This contains a servlet in which i have done the following</p>
<ol>
<li>Option to seek and read the file content from specific byte range by obtaining value from &quot;Range&quot; header in the request</li>
<li>Have added <code>Accept-Range:Bytes</code> and <code>Access-Control-Allow-Headers:Accept-Ranges</code> values in response headers</li>
</ol>
<p>Now I got struck in the following</p>
<blockquote>
<p>1.Where to add &quot;Range&quot; header value?</p>
<p>2.How to send range request from client?</p>
<p>3.From where these calls were made?</p>
<p>4.Should I include viewer.html?</p>
</blockquote>
<p>Please help me with this ! I'm collapsed :-(</p>