CODEWITHSUNDEEP
javascripthtmlpdf.jspdf-viewerpdfjs-dist
Tam Ho Chi
Tam Ho Chi

Reputation: 1

How can I display pdf file content with toolbar and sidebar in pdfjs-dist library

enter image description here

I want to show pdf content with toolbar as above, but it's only show pdf, How can I configuration to show the toolbar?

that's my step:

  1. I install pdfjs-dist: npm i pdfjs-dist
  2. my code:
    const pdfUrl = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';

    let pdfDoc = null,
        pageNum = 1,
        scale = 0.4,
        canvas = document.getElementById('pdf-canvas'),
        ctx = canvas.getContext('2d'),
        pageRendering = false,
        pageNumPending = null;

function showPdf() {
        pdfjsLib.getDocument(pdfUrl).promise.then(function(pdfDoc_) {
            console.log(pdfDoc_);
            pdfDoc = pdfDoc_;
            document.getElementById('page_count').textContent = pdfDoc.numPages;

            // Initial/first page rendering
            renderPage(pageNum);
        });
    }

    function renderPage(num) {
        pageRendering = true;
        pdfDoc.getPage(num).then(function(page) {
            const viewport = page.getViewport({scale: scale});
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            const renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };
            const renderTask = page.render(renderContext);

            renderTask.promise.then(function() {
                pageRendering = false;
                if (pageNumPending !== null) {
                // New page rendering is pending
                renderPage(pageNumPending);
                pageNumPending = null;
                }
            });
        });
    }

html:

<button type="button" class="btn btn-outline-secondary" @click="showPdf();">PDF</button>

<div class="p-2 border">
    <canvas id="pdf-canvas"></canvas>
</div>

import:

import 'pdfjs-dist/build/pdf.min.mjs';
import * as pdfjsLib from 'pdfjs-dist/build/pdf.min.mjs';

pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;
window.pdfjsLib = pdfjsLib;

I try to customize a simple toolbar but take too much time, Somebody help..! thanks

Upvotes: 0

Views: 536

Answers (1)

K J
K J

Reputation: 11739

As mentioned in comments.

To control the PDF viewers appearance you can use a frame since all HyperText binary attachments, such as images, objects or embeds use inline frames.

Here we have an unmanaged <iframe> on the left and the browser supplies the PDF viewer. On the right we have a remote managed PDF.JS viewer thus it is a chosen frame in frame.

enter image description here

The difference between frame .pdf and .html you will need a server to provide all the bundled binary support from PDFjs-dist such as icons etc.

<iframe src="server/example.pdf" width="500" height="800">Served binary</iframe>
<iframe src="https://mozilla.github.io/pdf.js/web/viewer.html" width="500" height="800">PDF.JS viewer</iframe>

Note there are differences seen especially in colouration between a true PDF viewer on the left and PDF.JS emulation on the right.

enter image description here enter image description here

Note also that using a JS viewer may encounter CORS restrictions so a browsers own PDF viewer may function but a remote one may not be allowed for security reasons.

enter image description here

With the PDF.js files including the viewer you simply add the input file.

<body>
<h1>PDF.js 'Hello, world!' example</h1>

iframe src="/public/web/viewer.html?file=helloworld.pdf"
<iframe src="/public/web/viewer.html?file=helloworld.pdf" width="500" height="800"> </iframe>
</body>

enter image description here

Upvotes: 0

Related Questions