我对客户端编程很陌生。我正在尝试使用 pdf.js 在我的网站上查看我的 pdf。通过遵循文档中的步骤，我尝试使用 pdf.js 加载 pdf。整个 pdf 文件通过单个请求下载。现在，我想做渐进式加载（通过指定范围下载）。
我在客户端和服务器端做了以下事情。
我的客户端包含两个文件
- 表单.js 和
- 索引.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 索引.html只需加载上面的js（form.js）和pdf.js和pdf.worker.js文件
SERVER
这包含一个 servlet，我在其中完成了以下操作
- 通过从请求中的“Range”标头获取值来查找和读取特定字节范围的文件内容的选项
- 已添加
Accept-Range:Bytes and Access-Control-Allow-Headers:Accept-Ranges响应标头中的值
现在我受到以下打击
1.在哪里添加“Range”标头值？
2.客户端如何发送范围请求？
3.这些电话是从哪里打来的？
4.我应该包含viewer.html吗？
请在这件事上给予我帮助 ！我崩溃了:-(
