我正在尝试将pdf渲染到单个画布上,我提到了下面的链接来实现它。
访问:Render .pdf to single Canvas using pdf.js and ImageData
var pdf = null;
PDFJS.disableWorker = true;
var pages = new Array();
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
var scale = 1.5;
var canvasWidth = 0;
var canvasHeight = 0;
var pageStarts = new Array();
pageStarts[0] = 0;
PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdf) {
debugger;
pdf = _pdf;
//Render all the pages on a single canvas
for (var pNum = 1; pNum <= pdf.numPages; pNum++) {
pdf.getPage(pNum).then(function getPage(page) {
var viewport = page.getViewport(scale);
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({ canvasContext: context, viewport: viewport });
pages[pNum - 1] = context.getImageData(0, 0, canvas.width, canvas.height);
canvasHeight += canvas.height;
pageStarts[i] = pageStarts[i - 1] + canvas.height;
});
}
canvas.width = canvasWidth;
canvas.height = canvasHeight;
for (var i = 0; i < pages.length; i++) {
context.putImageData(pages[i], 0, pageStarts[i]);
}
});
我看到空间被创建以呈现页面,而不显示pdf。
任何帮助都会大大增加。感谢。
答案 0 :(得分:0)
存储pageStarts的代码引用“i”就像它是迭代器索引一样,但是它在使用pNum的for语句中。我很惊讶这段代码不会在控制台中引发错误,指出您可能的解决方案。你应该改变:
canvasHeight += canvas.height;
pageStarts[i] = pageStarts[i - 1] + canvas.height;
类似于:
pageStarts[pNum - 1] = canvasHeight;
canvasHeight += canvas.height;
请注意,在您获取“last”值之后,我重新组织了canvasHeight计算。这将允许您确定当前页面图像数据的正确起始高度,而无需使用pageStart进行上一次迭代。
这是一个未经测试的解决方案,因为您没有发布其余代码,但它应该引导您找到解决方案。
答案 1 :(得分:-1)
这是带有textLayer的多页面视图
<script type="text/javascript">
window.onload = function () {
var url = '[[*pdf]]';
var scale = 1.1; //Set this to whatever you want. This is basically the "zoom" factor for the PDF.
var currPage = 1; //Pages are 1-based not 0-based
var numPages = 0;
var thePDF = null;
PDFJS.workerSrc = '/js/build/pdf.worker.js';
PDFJS.getDocument(url).then(function(pdf){
thePDF = pdf;
numPages = pdf.numPages;
pdf.getPage(1).then(handlePages);
});
function handlePages(page){
var viewport = page.getViewport(scale);
var pdfPage = document.createElement('div');
pdfPage.className = 'pdfPage';
var pdfContainer = document.getElementById('pdfContainer');
var canvas = document.createElement( "canvas" );
canvas.style.display = "block";
var context = canvas.getContext('2d');
var outputScale = getOutputScale(context);
canvas.width = (Math.floor(viewport.width) * outputScale.sx) | 0;
canvas.height = (Math.floor(viewport.height) * outputScale.sy) | 0;
context._scaleX = outputScale.sx;
context._scaleY = outputScale.sy;
if (outputScale.scaled) {
context.scale(outputScale.sx, outputScale.sy);
}
// The page, canvas and text layer elements will have the same size.
canvas.style.width = Math.floor(viewport.width) + 'px';
canvas.style.height = Math.floor(viewport.height) + 'px';
pdfPage.style.width = canvas.style.width;
pdfPage.style.height = canvas.style.height;
pdfPage.appendChild(canvas);
var textLayerDiv = document.createElement('div');
textLayerDiv.className = 'textLayer';
textLayerDiv.style.width = canvas.style.width;
textLayerDiv.style.height = canvas.style.height;
pdfPage.appendChild(textLayerDiv);
page.render({canvasContext: context, viewport: viewport});
var textLayerPromise = page.getTextContent().then(function (textContent) {
var textLayerBuilder = new TextLayerBuilder({
textLayerDiv: textLayerDiv,
viewport: viewport,
pageIndex: 0
});
textLayerBuilder.setTextContent(textContent);
});
pdfContainer.appendChild(pdfPage);
currPage++;
if ( thePDF !== null && currPage <= numPages ){thePDF.getPage( currPage ).then( handlePages );}
}
}
</script>