Javascript 我想在画布html标记中显示多页预览

我想在画布html标记中显示包含多个页面的PDF文件，如下所示：

我正在使用的库是jsPDF。但是，它仅使用此代码显示单页预览

var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

$("input[type='file']").on("change", function (e) {
    $("button[name='Preview']").removeClass("hidden");
    var file = e.target.files[0]
    if (file.type == "application/pdf") {
        var fileReader = new FileReader();
        fileReader.onload = function () {
            var pdfData = new Uint8Array(this.result);
            // Using DocumentInitParameters object to load binary data.
            var loadingTask = pdfjsLib.getDocument({ data: pdfData });
            loadingTask.promise.then(function (pdf) {
                console.log('PDF loaded');
                // Fetch the first page
                var pageNumber = 1;
                pdf.getPage(pageNumber).then(function (page) {
                    console.log('Page loaded');

                    var scale = 1.5;
                    var viewport = page.getViewport({ scale: scale });

                    // Prepare canvas using PDF page dimensions
                    var canvas = $(".pdfViewer")[0];
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    // Render PDF page into canvas context
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    var renderTask = page.render(renderContext);
                    renderTask.promise.then(function () {
                        console.log('Page rendered');
                    });
                });
            }, function (reason) {
                // PDF loading error
                console.error(reason);
            });
        };
        fileReader.readAsArrayBuffer(file);
    }
});

我希望它在多个页面，如如果PDF是5-10页，然后应该显示许多页面的数量

添加一个div以附加

以呈现多个页面

我修改了您的代码，它可以正常工作，如下所示：

HTML

Javascript

var thePdf=null；
var标度=1.5；
函数呈现页面（页码、画布）{
thePdf.getPage（页码）。然后（函数）（第页）{
viewport=page.getViewport（{scale:scale}）；
canvas.height=viewport.height；
canvas.width=viewport.width；
render（{canvasContext:canvas.getContext（'2d'），viewport:viewport}）；
})
};
var pdfjsLib=window['pdfjs-dist/build/pdf']；
pdfjsLib.GlobalWorkerOptions.workerSrc='0https://mozilla.github.io/pdf.js/build/pdf.worker.js';
$（“input[type='file']”）。在（“change”上，函数（e）{
$（“按钮[name='Preview']）。removeClass（“隐藏”）；
var file=e.target.files[0]
如果（file.type==“应用程序/pdf”）{
var fileReader=newfilereader（）；
fileReader.onload=函数（）{
var pdfData=新的Uint8Array（this.result）；
var loadingTask=pdfjsLib.getDocument（{data:pdfData}）；
loadingTask.promise.then（函数（pdf）{
thePdf=pdf；
查看器=document.getElementById（'pdf-viewer'）；
对于（page=1；page非常感谢您的代码。但是如果我选择使用它，我想通过
使用它，这是否可能？不，它只在一个页面映射到一个画布时起作用。什么是
canvas.className='pdf page canvas'；
？是否需要添加它，或者我们可以删除它？删除后它会起作用吗？这只是用于css添加的。）ome画布周围的边框或您想要的效果。可以将其删除。