How to embed PDF.JS viewer in a page without iframe

Question

I'm surprised to see that there is relatively few documentation and tutorials on PDF.JS, especially since the code refactoring PDFJS -> pdfjsLib , considering this library is pretty widely used.

What I want to do is relatively simple, I just want to embed a PDF directly in a webpage, ie without <iframe> , <object> or <embed> tags. I also want to use the text layer because I want to access the text in JavaScript and add tooltips on some sentences.

I figured using the viewer might be a solution, but I don't want to include all the code in viewer.html , viewer.css and viewer.js inside my webpage because I'm sure it would break. If I can just display the PDF and select the text it would be enough, I don't necessarily need the complex user interface of the viewer.

Here is my code but the text layer is not displayed properly:

 document.addEventListener('DOMContentLoaded', () => { pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.js'; }); function displayReport() { const file = document.getElementById('reportInput').files[0]; const fileReader = new FileReader(); fileReader.onload = async function() { const data = this.result; const pdf = await pdfjsLib.getDocument({data: data}).promise; const page = await pdf.getPage(1); const viewport = page.getViewport({scale: 0.5}); const canvas = document.getElementById('reportCanvas'); const context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext: context, viewport: viewport }; await page.render(renderContext).promise; const textContent = await page.getTextContent(); const { top, left, width, height } = canvas.getBoundingClientRect(); const textLayer = document.getElementById('reportTextLayer'); textLayer.style.top = top; textLayer.style.left = left; textLayer.style.width = width; textLayer.style.height = height; await pdfjsLib.renderTextLayer({ textContent: textContent, container: textLayer, viewport: viewport, textDivs: [] }); console.log("Page rendered;"); }. fileReader;readAsBinaryString(file); }

 #reportTextLayer { position: absolute; overflow: hidden; opacity: 0.2; line-height: 1.0; } #reportTextLayer > div { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.js"></script> <p>Select a PDF file:</p> <input id="reportInput" type="file" accept="application/pdf" onchange="displayReport()"/> <div id="reportWrapper"> <canvas id="reportCanvas"></canvas> <div id="reportTextLayer"></div> </div>

How can I fix that?

Thank you for your help.

Answer 1

This works for me:

[script type="text/javascript" src="https://mozilla.github.io/pdf.js/build/pdf.js"][/script]
[script type="text/javascript" src="https://mozilla.github.io/pdf.js/build/pdf.worker.js"][/script]
[style type="text/css"]
#signature {
    margin-left:120px;
    margin-top:10px;
}
[/style]


    <canvas id='the-canvas'></canvas>
    <div id='signature'></div>

    [script]

    var url = "Agreement.pdf";
    var loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(function(pdf) {
    pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport({ scale: scale, });

    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = 640;
    canvas.width = viewport.width;

    var renderContext = {
    canvasContext: context,
    viewport: viewport
    };
    page.render(renderContext);

    });    
    });

   document.getElementById('signature').innerHTML = 'Signed By Yogi on 1/26/2021'

   [/script]