コミックサイト作成した時に使用しました。
pdfファイルのページ数に対して、canvasを生成し
pdfファイルをレンダリングしています。
以下がコードになります。
(function(){
var url = 'file.pdf';
PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
var pdfDoc = null;
var pageNum = 1;
var pageRendering = false;
var pageNumPending = null;
var scale = 1;
var numi;
var n;
var ctx;
var viewport;
var canvas0;
var renderContext;
var renderTask;
var pdfDoc;
var createdom = document.getElementById("canvas");
PDFJS.getDocument(url).then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages;
renderPage(pageNum);
});
function renderPage(num) {
pageRendering = true;
fragment = document.createDocumentFragment();
for(var i = 1; i < pdfDoc.numPages + 1; i++){
cv = document.createElement("canvas");
cv.setAttribute("id","canvas" + i);
fragment.appendChild(cv);
pdfDoc.getPage(i).then(function(page) {
numi = i++;
n = numi-3;
canvas0 = document.getElementById("canvas" + n);
ctx = canvas0.getContext('2d');
viewport = page.getViewport(scale);
canvas0.height = viewport.height;
canvas0.width = viewport.width;
renderContext = {
canvasContext: ctx,
viewport: viewport
};
renderTask = page.render(renderContext);
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
return;
});
}
createdom.appendChild(fragment);
document.getElementById('page_num').textContent = pageNum;
}
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
function onPrevPage() {
if (pageNum <= 1) {
return;
}
pageNum - 2;
queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);
function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum + 2;
queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);
})();
少し、力技になってしまっている箇所がありますが、実装できました。