Yoh*_* L. 4 html javascript pdf.js
我想在 html page 4 canvas 中显示，每个画布对应一个 pdf 文件的页面。我成功地在 1 个画布中显示了 1 个页面，但是当我想显示 4 个时它不起作用：没有显示任何页面。
我做错了什么？
编辑：
我试图解决承诺的问题（我编辑了我的代码），但现在我遇到了另一个错误：Error: Invalid page request pdf.js:2687:31这是相应的代码（2697 是返回的行）：
getPage: function WorkerTransport_getPage(pageNumber, capability) {
if (pageNumber <= 0 || pageNumber > this.numPages ||
(pageNumber|0) !== pageNumber) {
return Promise.reject(new Error('Invalid page request'));
}
这是我的代码：
html文件：
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="PDF Viewer"/>
<title>My page</title>
</head>
<body>
<body>
<canvas id="canvas1" width="300" height="300"></canvas>
<canvas id="canvas2" width="300" height="300"></canvas>
<canvas id="canvas3" width="300" height="300"></canvas>
<canvas id="canvas4" width="300" height="300"></canvas>
<script src="/assets/js/pdf.js"></script>
<script src="/assets/js/pdf.worker.js"></script>
<script src="/assets/js/pdf.latex.main.js"></script>
</body>
</html>
Javascript 文件 (pdf.latex.main.js) ：
PDFJS.disableStream = true;
var pdfFile;
PDFJS.getDocument('/assets/pdf/tempPDF.pdf').then(function (pdf) {
pdfFile = pdf;
for(var i = 1; i < 4; i++) {
var canvas = document.getElementById('canvas'+i);
var context = canvas.getContext('2d');
PDFJS.disableStream = true;
openPage(pdf, i, context);
}
});
function openPage(pdfFile, pageNumber, context) {
var scale = 5;
pdfFile.getPage(pageNumber).then(function (page) {
viewport = page.getViewport(scale);
// reference canvas via context
var canvas = context.canvas;
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = "100%";
canvas.style.height = "100%";
wrapper.style.width = Math.floor(viewport.width / scale) + 'pt';
wrapper.style.height = Math.floor(viewport.height / scale) + 'pt';
var renderContext = {
canvasContext: context
, viewport: viewport
};
page.render(renderContext);
});
}
您正在使用的承诺，因此，所有在你的函数调用.then分支完成后，你的for循环结束后，即用i等于3（最后一次迭代值）。结果，您填充了相同的canvas3 次。顺便说一下，看看你的for循环。它只循环了 3 次。您可能希望将循环条件更改为i<=4.
您应该PDFJS.getDocument在循环之前调用，并从 promise 中调用此循环。
我终于解决了，解决方案如下：
pdf.latex.main.js
var pdfFile;
PDFJS.getDocument('/assets/pdf/tempPDF.pdf').then(function (pdf) {
pdfFile = pdf;
for(var i = 1; i <= 4; i++) {
var canvas = document.getElementById('canvas'+i);
var context = canvas.getContext('2d');
PDFJS.disableStream = true;
openPage(pdf, i, context);
}
});
function openPage(pdfFile, pageNumber, context) {
var scale = 5;
pdfFile.getPage(pageNumber).then(function (page) {
viewport = page.getViewport(scale);
// reference canvas via context
var canvas = context.canvas;
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.width = "50%";
canvas.style.height = "50%";
var renderContext = {
canvasContext: context
, viewport: viewport
};
page.render(renderContext);
});
}
索引.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="PDF Viewer" />
<title>My page</title>
</head>
<body>
<form action="pdf_latex_test.php">
<input type="submit" value="execute" /> </form>
</body>
<body>
<canvas id="canvas1" width="300" height="300"></canvas>
<canvas id="canvas2" width="300" height="300"></canvas>
<canvas id="canvas3" width="300" height="300"></canvas>
<canvas id="canvas4" width="300" height="300"></canvas>
<script src="/assets/js/pdf.js"></script>
<script src="/assets/js/pdf.worker.js"></script>
<script src="/assets/js/pdf.latex.main.js"></script>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
4669 次 |
| 最近记录： |