Display Local PDF File In HTML Using a Button

Question

var pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
var PDFRenderingInProgress = false
var pdfDoc = null
var canvas = document.getElementById('the-canvas')
var ctx = canvas.getContext('2d');
var container = document.getElementById("div-container")

var url = 'https://d3bxy9euw4e147.cloudfront.net/oscms-prodcms/media/documents/Physics-WEB_Sab7RrQ.pdf';


var wheelTimeoutHandler = null;
var wheelTimeout = 250 //ms

function renderPage(scale) {
    pdfDoc.getPage(1).then(function(page) {
        var viewport = page.getViewport({scale: scale});
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        var renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };

        if (!PDFRenderingInProgress) {
            PDFRenderingInProgress = true
            var renderTask = page.render(renderContext);
            renderTask.promise.then(function() {
                PDFRenderingInProgress = false
            })
        }
  });
}

function zoomWithWheel(event) {
    panzoom.zoomWithWheel(event)
    clearTimeout(wheelTimeoutHandler);
    wheelTimeoutHandler = setTimeout(function() {
        canvas.style.transform = "scale("+1/panzoom.getScale()+")"
        if (pdfDoc)
            renderPage(panzoom.getScale());
    }, wheelTimeout)
}

pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
    pdfDoc = pdfDoc_;
    renderPage(1);
});

var panzoom = Panzoom(container)
container.parentElement.addEventListener('wheel', zoomWithWheel)


function select_pdf(){}

#the-canvas {
  direction: ltr;
  transform-origin: top left;
}
#div-container {
  width: 400px;
  height: 400px;
}

<button onclick="select_pdf()">Select Pdf</button>

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.3.2/dist/panzoom.min.js"></script>
<div id="div-container">
  <canvas id="the-canvas"></canvas>
</div>

My demo display a PDF from a web URL which is var url = 'https://d3bxy9euw4e147.cloudfront.net/oscms-prodcms/media/documents/Physics-WEB_Sab7RrQ.pdf';, may I know how to change the Web_URL Link Upload to local files upload? The PDF can be panned and zoom using mouse, but the only challenge right now is I wish to select PDF from a local computer file using the Select Pdf button and not from a web URL? Can anyone give me some guidance on this? Any help will be very much appreciated :)

score 0 · Answer 1 · answered Mar 11 '23 at 15:19

You need to add a hidden file-opening input tag and make your button click it automatically like this...

<input type="file" id="FileOpen" accept="application/pdf" onchange="if((this.value!==null)&&(this.value!=='')){select_pdf(this.value);}" style="display:none;">

<button onclick="FileOpen.click();">Select Pdf</button>

Display Local PDF File In HTML Using a Button

1 Answers1