PDF.js Tutorial: Render PDF files on HTML5 Canvas

In this quick tutorial, I show you how to load a PDF file and render its contents on an HTML5 canvas using PDF.js, a free and open source JavaScript library. By the end of this video, you'll have learned the skills required to create your own custom PDF viewer for your website.
Attributions:
--------------------
PDF.js logo - Mozilla Foundation [CC BY-SA 2.5 (creativecommon...)], via Wikimedia Commons
#pdfjs #html5 #canvas

[@gaminggenes320]

When I looked at the Mozilla PDF.js documentation, I was like almost fainted; but after watching your video: "Wow! So easy!" Thank you so much! :D

[@achuubhai1632]

is it working in google chrome?

[@workingTchr]

I couldn't get beyond "Uncaught TypeError: pdfjsLib.getDocument(...).then is not a function" for pdfjsLib.getDocument('mydoc.pdf').then(doc => {}); Something with the promise syntax is incompatible with the current pdfjs I think. I did some more looking and Mozilla, who apparently created pdfjs, has a fully working demo you can take apart. It was last updated 10/2021.

[@workingTchr]

I got pdfjs to work! But, be warned, the Mozilla demo is not something you can "take apart." It's interconnected in a zillion ways. The most you can do is "display:none" parts of it. Having said that, it would take one person less than a week to write a really helpful explanation of pdfjs for those of us wanting to use it. Why haven't they?

[@xuhangfan3726]

Thank you so much, now I at least know where to start from

[@appleaye]

Thank you so much. Your short lecture is a boost to the trajectory.

[@sukanyasinha3583]

Hi, I have a question if my pdf contains 90pages then how to display all the pages can you please give me basic hint about this

[@FufaTujuba]

how to make this render all pages? How about rendering .doc file too?

[@Defense89]

hi , i tried to follow step by step instruction but final i got a 0 width and 0 height canvas any idea what i should do? awesome video by theway , the simpliest ive seen for beginners in this matter. very good instructions ... clear and precise.

[@beredaze9886]

Thank you dude, you made my day!

[@user-us9fk2lb5l]

want to add every page of pdf on different canvas

[@Bullochman]

wow man, you made my day too!!!! That is great!!!!

[@jspanner]

How can I render all the pages...? Should I use a loop for it...?

[@ncsncs2740]

how to use the same canvas (which displaying a pdf) to render new pdf via ajax call?

[@rebecaparedes6903]

How can I view all pages? no just one

[@User-10848-x]

Thanks you

[@SwapnilshelkeInfinety]

@@User-10848-x welcome

[@kiruthikaparamasivam9472]

Thanks for your video,its very easy but the pdf file is loading as image so not able to copy the contents ,can you kindlly share your view

[@rosalyna_24]

is there a way to edit the pdf file like adding dates or signatures for example??

[@user-nf6jl9cg1t]

can I put more then 1 page at once and have a scrollbar on the side

[@luckynath2330]

thanks, this tutorial helps me a lot, but I have questioned how we add progress bar before opening pdf file (if pdf file is large file size it takes time to open) .i can search for it but there is little information available on online with PDFJS not with pdfjsLib.how to resolve this problem?

[@reddinandini7256]

Hi do you know how to render the toolbar consisting search option in pdfjs?

[@gmanikamnaidu7338]

I want to apply annotation so how can we do...??? please help me sir...

[@Daydreamkt]

What to do if i want to render a online pdf files using its url ?

[@chriszhang5180]

thank you man, very helpful.

[@kevinwakhisi7001]

the explanation is good but on loading the page it automatically starts downloading the PDF file(s)

[@AkshayPandita-kb4bi]

Can we use this to render the pdf on 3d canvases built in Unity Game Engine

[@fabianl5453]

i get this error : Uncaught TypeError: pdfjsLib.getDocument(...).then is not a function

[@chroniquarchi]

Same here! If someone could hepl it'd be cool! :)

[@isaiahkiefer4729]

do pdfjsLib.getDocument().promise.then

[@spolio8795]

@@isaiahkiefer4729 Love you

[@HarshithC]

Missing pdf exception error. It's not working

[@shilpakumari1559]

Hi Sir, Thanks for sharing the video. just a question why it is throwing error when tried to open in Chrome?

[@hathibelagalproductions2426]

That's because Chrome blocks local AJAX requests and PDF.js loads your PDF file using an AJAX request. Easiest way to fix this is to use a local web server.

[@isaiahkiefer4729]

Even after including the pdf.js cdn, it says that pdfjsLib is not defined. Any thoughts

[@jericlamban1836]

same with me, for now, do you know the solution for this? if yes please, help me, thank you

[@siddiquiabdullahabrarahmed7118]

Use the same version of script that he uses

[@rajsheth4343]

It's working on chrome browser as well as on mobile? Or only work in firefox browser?

[@ankitkumarjat9886]

Does it download full pdf first if i want only one page

[@AshishMestry29]

how to get pdf document from server?

[@TheBhumbak]

why its not showing error related to workers

[@noushadurrahman5873]

I am getting error: Uncaught (in promise) TypeError: Cannot read property 'transform' of undefined at e.beginDrawing (pdf.min.js:1) at t.initializeGraphics (pdf.min.js:1) at pdf.min.js:1

[@venkatesh2788]

how to make that into responsive

[@harshmultani922]

Hi, Does pdf.js provide a support so that we can use it as an API to convert PDF into HTML and then that HTML to JSON

[@sdshsjg]

how do i disable download from pdfjs and right click save as ... and (ctrl+s) ? and disable selecting text (onmouseclick)

[@phekoolegend9218]

hiya can you find solution? i tried but I can't control ctrl+s or save file from toolbar option.

[@phekoolegend9218]

style="pointer:none"; for mouse pointer remove on page.

[@rajsheth4343]

It's not working. Please share a demo folder link.

[@MuhammadUsman-ix6jo]

Can we Fill or create the Forms in PDF files using this library or any other?

[@s72738]

how to search on canvas?

[@nishanshan6900]

Thank you very much. This is very informative and practical tutorial

[@deyajean9444]

Please do it with reactjs

[@swapnilkatpally4808]

Yes. Hathibelagal Productions, can you do the tutorial with ReactJS.

[@tabclausen]

Does it render to the canvas as an image or text? - I'm looking for how to export rendered html to and separate file. Would that be possible?

[@hathibelagalproductions2426]

It's all rendered as pixels on the canvas. PDF.js, however, does offer methods you can use to extract text.

[@felipebueno2555]

Indian Accent 10/10 video tutorial

[@saranguru6100]

hi.How to make the pdf fit to entire screen?

[@agamurat3019]

can we do it when on hover

[@vivekvitthalraopatil2775]

how to open pdf in adobe by running a javascript file ?

[@arghanilanjonnondi8280]

alert("Thanks , Sir "); ☺☺☺☺

[@pushpendraupraity3755]

code is not working

[@user-st4oc6hj4k]

is this support rtl?

[@phekoolegend9218]

hi brother, i'm searching solution view pdf without download,save and print option. js.pdf help or i use epub

[@badrussholehsalim4534]

i'm searching for it too. please, tell me if you find the solution 🙏🙏

[@phekoolegend9218]

@@badrussholehsalim4534 no solution pdf file always save if anyone use in explorer (firefox or chrome) file save this page option. pdf download too. convert your file in epub and show page by page file in viewer. i know php solution.

[@karthikrajakandasamy3982]

Is this open source?

[@dilipkevat4939]

Thank you sir, can you give me html fle code of this page

[@maisum279]

It shows nothing.

[@NamLe-sl4qy]

not working, Uncaught TypeError: pdfjsLib.getDocument(...).then is not a function

[@NamLe-sl4qy]

MissingPDFException {message: "Missing PDF "file:///Users/lequynam/Desktop/pdf-viewer/sample2.pdf".", name: "MissingPDFException"}

[@NamLe-sl4qy]

Access to XMLHttpRequest at 'file:///Users/lequynam/Desktop/pdf-viewer/sample2.pdf' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

[@siddiquiabdullahabrarahmed7118]

Use the same version of script that he uses

[@DarinWixon]

This is good if you don't want to use chrome or don't expect your customers to use chrome. (It doesn't work with Chrome).

[@NamLe-sl4qy]

not working 😡😡😡😡