How can I implement pdfjs in liveview?

Questions / Help
1

How can I exactly implement pdfjs in elixir liveview?

1 Like
2

You’ll need to create a Hook: JavaScript interoperability — Phoenix LiveView v0.18.3

2 Likes
3

Please provide a practical example/guide

4

What have you tried so far? Have you got pdfjs working without liveview?

1 Like
5

I have installed pdfjs using npm, I have made a template and created a hook in app.js.
At template

<div 
  id="pdfReader"
  phx-hook="pdfReader"
  phx-update="ignore">
</div>

<div id="pdfReader"></div>
<canvas id="myreader"></canvas>

At app.js

import Hooks from "./hooks";

At hooks.js

import pdfReader from "./hooks/pdf";

let Hooks = {
    pdfReader: pdfReader
}

export default Hooks;

At pdf.js

import pdfjsLib from "pdfjs"
const pdfReader = nameRoute => {           
    let loadingTask = pdfjsLib.getDocument(nameRoute),
        pdfDoc = null,
        canvas = document.querySelector('#cnv'),
        ctx = canvas.getContext('2d'),
        scale = 1.5,
        numPage = 1;

        const GeneratePDF = numPage => {

            pdfDoc.getPage(numPage).then(page => {

                let viewport = page.getViewport({ scale: scale });
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                
                let renderContext = {
                    canvasContext : ctx,
                    viewport:  viewport
                }

                page.render(renderContext);
            })
            document.querySelector('#npages').innerHTML = numPage;

        }
       
        loadingTask.promise.then(pdfDoc_ => {
            pdfDoc = pdfDoc_;
            document.querySelector('#npages').innerHTML = pdfDoc.numPages;
            GeneratePDF(numPage)
        });
}

const startPdf = () => {
    pdfReader('../')
}

window.addEventListener('load', startPdf);
export default pdfReader;

But still no working

6

Anyone wishing to help might first want to look through this discussion of the same problem on the Elixir Discord to prevent double work and outdated code examples: Discord

7

Here’s a working example from my project:

To install JS dependency: npm install pdfjs-dist

JS:

LiveView:

It has simple pagination and zoom controls. It’s a bit hacky and the JS is messy but hopefully it can help others get started…

1 Like