如何使用pdf.js从客户端设置范围标头? [英] How to set range header from client with pdf.js?

问题描述

我对客户端编程非常陌生.我正在尝试使用pdf.js在我的Web中查看我的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"标头获取值来选择和读取特定字节范围内文件内容的选项
2. 已在响应标头中添加了Accept-Range:Bytes和Access-Control-Allow-Headers:Accept-Ranges值

现在，我被以下内容所震撼

1.在何处添加"Range"标头值?

2.如何从客户端发送测距请求?

3.这些电话是从哪里发出的?

4.我应该包含viewer.html吗?

请帮助我！我崩溃了:-(

解决方案

1.在何处添加"Range"标头值?

PDF.js检测到服务器是否返回"接受范围:字节"；如果服务器返回有效的HTTP请求标头(按规范)，PDF.js(将终止对不允许增量XHR的平台的主要请求，并将发出范围请求.

2.如何从客户端发送测距请求?

当PDF.js决定服务器可以处理范围请求时，它会通过XHR自动执行此操作.

3.这些电话是从哪里发出的?

请参见 network.js 文件

4.我应该包含viewer.html吗?

否

看起来像当前提供PDF数据的servlet不支持有效的HTTP范围请求协议.仅设置"Accept-Ranges:Bytes"是不够的.请参阅如何在PHP中实现，或在此之前查看回答了问题.. >

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

1. form.js and
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;
  }

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

1. Option to seek and read the file content from specific byte range by obtaining value from "Range" header in the request
2. 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 :-(

解决方案

1.Where to add "Range" header value?

PDF.js detects if server returns "Accept-Ranges:Bytes" If server returns valid HTTP request headers (per spec), PDF.js (will abort main requests for platforms that does not allow incremental XHR and) will issue range requests.

2.How to send range request from client?

PDF.js does that automatically via XHR when it decides that server can handle range requests.

3.From where these calls were made?

See network.js file.

4.Should I include viewer.html?

No

Looks like currently the servlet that provides PDF data does not support valid HTTP range request protocol. Just setting "Accept-Ranges:Bytes" is not enough. See how it's implemented in PHP at or check previously answered question related to servlets.

这篇关于如何使用pdf.js从客户端设置范围标头?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！