Create a Custom PDF Viewer With JavaScript

[@kidethezdaga]

When I typed PDF.js in my youtube search I just hoped I will find a single video that can help me a bit. But only then I realised that I forgot about the best teacher in youtube programming community... Ty Brad , you are just awesome...

[@n_fan329]

Again I'm still confirming that you are BY FAR a GOD gift for all coding community, worldwide 😍😍👌👌

[@jamesbest2221]

Thank you. That was enjoyable to watch. Also, thanks for hand-typing your code, and explaining every step so clearly! I think that’s your secret-sauce as to why your videos are so good!

[@javascriptmastery]

For all those wondering how to create a dynamic PDF using JS and React, so you can later view it in this PDF viewer, I have created a video explaining how to do it! Cheers Brad, you're the best! 🥂

[@adrianhajdin1673]

Thanks man, that's exactly what I have been looking for!

[@luciafilicic4140]

Subscribed, Brad's video and yours go great together!

[@iMakeMemes]

where's the link

[@matthewmbonu3159]

As a starting coding bootcamp student I can't say how much your videos have been helpful thanks so much for the great content!

[@alexanderlo8380]

This video still helped me out in 2020, Thanks a bunch! Stay safe everyone

[@batesmjr]

Absolutely a fan! This really help me with understanding promises and catching errors. I really appreciate your work and breakdown of the language.

[@fuzzybuddy4457]

Hello, Just wanted to ask how can I display all of the pages of the pdf on page instead of going next page and previous page thanks, Arnav 😀

[@happatrick7330]

Love your tutorials, ever since I started following your content my coding skills have definitely improved. Thank you Brad.

[@raymond1489]

Thank you very much bro. I upgraded this application by means of your current and previous lessons. I used localstorage and contenteditable options to user can choose a page he wants.

[@rosalyna_24]

can u share the code please

[@raymond1489]

@@rosalyna_24 github.com/SamFredrickson/PDFReader

[@armaandhanji2112]

Exactly what I needed...thanks so much Brad. Best channel on youtube..hands down.

[@abodanzieri]

Thanks a lot. I just needed to have this for my Project so phones could see the pdfs without having to download them. I managed to change it so it works on my Application. Now it works nicely on Desktop and Mobile. Dont worry i credited you and refered to your video in my code.

[@kevinb6568]

Can you open local file documents?

[@grey4032]

you are a life saver. thanks for all your videos

[@oskarlaskowski3173]

it is a pleasure being able to code along. Great tutorial.

[@ayodejisokan]

Thanks so much Brad! You've help a lot of us through your dedication to online education.

[@igorr4682]

very useful tool, you can take advantage of PDF reader install on your system and do the same with or tag as well

[@javascriptwar9525]

I would like to follow this channel for forever..☺🙌❤.. You all are such a great developers really honorable

[@itahirk]

Brad, You are Awesome. Presenting us always with something extraordinary.

[@mioszkaput235]

I really enjoy these quickshot-videos! (especially with usefull js!)

[@MohdShoab-jx8qu]

Thank you so much sir for this amazing video 🤠 Love from India

[@registrarmusica5793]

my friend your video is perfect. Congratulations for the good work

[@Thomas_Grusz]

Thanks Brad. That's a super handy project.

[@cognito_decifrado]

Hello, the code does not work, is giving 3 errors: 1º - The origin 'null' was blocked by the policy of cors. 2nd - Cannot read property 'xhr' of undefined. 3rd - Uncaptured error: cannot read the 'reject' property of undefined. Would you help me? I'm studying js, but could not succeed.

[@cahyoarissabarno46]

You can fix that ?

[@stojkovv]

Very nice, I have become your patron from this video. Thank you

[@MathCoaching]

Hi, is there a simple way to force pdf to be resized according to the device of user ? the viewer is too big for smartphone devices.

[@sagarmaheshwary3150]

I was waiting for this since I saw the repo on my github dashboard.

[@skjerk]

Extremely useful! Just what I needed :-) You have a perfect way of explaining stuff!

[@mitjed]

Its good for integrating your resume into your website.

[@chijideagboje8424]

This project help me understand how canvas works. Thanks

[@derekgilbert1222]

I've started to feel guilty having all of this consistent content for free.

[@DhananjayGupta]

Just pay something

[@robertmckethan8749]

Thank you for your awesome tutorial! I've followed the directions with excellent results using Visual Code's Go Live feature. However, I am attempting to use the code on a Drupal 9 site. I've installed the CSS, HTML, and JS in the correct directories. The code works except that I must click on the Next Page button to display content and it starts on the 2nd page. Also, the 'Page of' doesn't display anything. Any suggestions? In advance thank you for any suggestions you might have. Robert McKethan

[@dkmodder4405]

I was just looking for one of these and what do you know, Brad has already made a tutorial!

[@muhammadsajjad7957]

@Brade, your videos are very helpful. Thanks man !

[@camillapantoja873]

Mr. Brad to the rescue as always !!!!

[@jorgealloza6139]

You are a hero, god will take care of you.

[@durgachaitanya2871]

Sir... Your videos simply awesome..... Please make video on animated menu bar.... With search box

[@anuadebayo7267]

You are awesome

[@TraversyMedia]

Thanks :)

[@Flamewheel2001]

Thanks! Appreciate your tutorials and you udemy courses

[@ziborgbe]

We are able to see your mind work flow during creation of an application. It is awesome. Is this your normal speed ? Have you prepared this before? Many thanks Brad.

[@arogueotaku]

I'm confused. Why are we using that recursive call to renderPage method?

[@crypt0z]

Pretty slick Brad! I learnt a lot.

[@ndilionel]

Works great. Thanks. keep up the good work

[@jonathansloan334]

Excellent Video! Thanks for this!

[@arnelarnaldo7376]

Hello Brad, can you point me to some JS codes that will allow the viewed PDF to be printed? Thanks and more power to you.

[@TheJackal_089]

Great tutorial, very useful. Thanks!

[@MissOttolini]

Thank you for this tutorial! How do I publish this to host on a web server?

[@HostDotPromo]

Build build build 💰 PDF libraries are changing the game.

[@nadoguirra]

Very good! Thanks Traversy :D

[@tanganov]

I wonder how would you make synchronize with thumbnails list of document (nav panel) while scrolling the whole document?

[@dkmodder4405]

I have a question; How would I go about creating an xlsx (Excel spreadsheet) file parser for the web which displays the excel sheet? I want to do it in PHP or JavaScript preferably.

[@NIKHILKUMAR-jm6bb]

Mr. Brad You are really doing a great job. I have learnt a lot from your videos.Thanks. I need a help: Moving forward on your above web application, I want to know that how can I extract text, pictures,etc. from the pdf file? I will be very thankful to your help.

[@kywazzyoutube942]

I have a question the menu of number page next page and prev page move when i scroll and we don't see this menu when i'm on the footer of the pdf viewer how can i do to the menu is display when i scroll on the bottom

[@omarashraf6193]

Thank you for simple and clear explanation 🖤. I have a question. Is there a way to use/extend annotations functionality without pdfjs paid license? do you have any guidance where to look at or focus on in order to develop annotations features my self?

[@Ribby00]

Very nice. You should do a video to show how to create PDFs in JS or PHP or something from db records or charts or something. Could be really handy for business creators that want to create apps that can display data then export the data to PDF

[@HvrriMusic]

whats the shortcut to automatically write the syntax example: 6:08

[@utkarshsrivastava2107]

those are called emmets, this should be helpful -> code.visualstudio.com/docs/editor/emmet

[@subhajitroy3775]

Please correct me if I am wrong somewhere, the next and previous buttons were not changing pages but after the following changes queueRenderPage it was working fine const queueRenderPage = num => { if(pageIsRendering){ pageNumIsPending = num; console.log("pageNumIspending"+pageNumIsPending); renderPage(pageNumIsPending); ///// Passed renderPage with the pending number }else{ renderPage(num); } }

[@sitikantasatapathy]

can you help in in this. I want to add zoom in / out functionality

[@kailashmalveeya9523]

Hey Brad! thanks a ton for this amazing explanation. could you please explain how to implement zooming in pdf viewer.

[@mohamedelmeziani4012]

is there a way to get a text from the pdf when we select smth and return it as a js string?

[@cr0n0s224]

Thanks a lot! I have a question: If I move to the third page and reload the page, how can I make it reload on the page, leave me on the third page

[@abirbeisekei1382]

thank you braaaaah... wish you all the bests

[@reponseashimwe4469]

Thank u so much! This was so helpful

[@JohnDoe-qs7mg]

Hello, can you manipulate with the number of pages that you just want show in pdf.js?

[@ishitavemana]

I got this error when i am trying to host from google drive to web: Uncaught (in promise) MissingPDFException

[@haoyuandong]

Have you solved this problem?

[@robertocarreira5185]

Hi! I´m trying to follow your tutorial, but I think that things has change since 2019, and the pdf.js library simply don´t load when invoqued, or imported, or the file put under a local folder, so I keep getting error messages of no defined variables and export errors (mime type) from the console. Is there some thing that must be added to the original project, so it keep working fine?

[@corpserate-t2x]

Use this: let { pdfjsLib } = globalThis; pdfjsLib.GlobalWorkerOptions.workerSrc = "lib/pdfjs/build/pdf.worker.mjs"

[@Silent-Scandals]

How files are running on local host. I am unable to figure out please help. We have simple html and other files but you are running inside local host

[@angeloendozo256]

Hi guys im quite confused how the pageNumIsPending got a value of the page number automatically. Was that built-in with the API in the first place? How did it get a value other than null?

[@Waelio]

Wonderful, Thank you! You do however realise that the real pickle is how to generate a pdf :( Most of my project require exporting data to pdf or excel, and I always found it challenging to generate a pdf ready for printing (A1/Letter) and so on. If you have the time, this would be a wonderful lesson. Thanks

[@coderobot6544]

Is it possible to limit the pages to be rendered of the pdf file? Like only 2 out of 10 pages of the PDF file should be rendered

[@eswarkrishnamaganti6409]

Hey Brad thanks for All ur videos which helped me a lot to learn Please do a video on ajax php database operations plzz brad

[@SpringfieldTechCC]

Hi Brad! Useful video for sure! One problem though. If the PDF contains a link, the link doesn't seem to work. Any ideas?

[@javiercutillasverdejo2492]

Currently when opening the index.html file the error (Deprecated API usage: No "GlobalWorkerOptions.workerSrc" specified.) appears. How can we solve it?

[@amerpro1748]

Sounds like a fun project

[@amitsengupta8136]

Awesome! Can I view and edit a word document (docx) on a browser? Any thought? Thanks!

[@ayatullahkhameni9301]

why we need this two variable pageIsRendering = false, pageNumIsPending = null; when we just want to get pageNum and wants to call again renderPage() function. const showNextPage = () =>{ if(pageNum >= 5){ return; } pageNum++; renderPage(pageNum); } what's problem with that....it works fine. (I am new in javascript)

[@BrotherHank]

Quick question. What do we do if the PDF file has spaces in the name? I keep getting the error posted with %20 in place of the spaces in the file name.

[@isaiahkiefer4729]

I am just trying to get it to display a simple pdf. I followed all of the code and got it to run with now errors and it is loading the resource, but the pdf is still not being displayed. Any ideas on why this may be?

[@Defense89]

awesome video!!!!! juste wanted to ask...can we change language of the pdf ? is it customable? anyway to do that? thx for this video really inspired me.

[@Saaztube]

Hi, I'm trying to export invoices to pdf files, what would be the best way, if I'm using php as my main language? Any suggestions would be welcomed. Thanks!

[@randalleikelboom2099]

Thanks! This was a great video. It's working great...Is this any guidance on making the viewer more responsive?

[@cesarherrera7509]

Great tutorial, I was wondering if you have any idea on how to insert a digital pen signature onto a PDF file

[@rosalyna_24]

hey did u find the solution

[@prateekdubey4095]

I'm facing an issue with pdfjsLib object is there something i can do to fix that?

[@sdshsjg]

how to add disable right clicking and printing so that the user cannot steal or download or print the pdf ?

[@pitchblackc0d314]

wot ant screenshot lmao

[@paras121991]

Sir, I have done it before, ie i use pdf.js before but when getting pdf from a url link and pass the link to url, it does not work

[@kushalgopee3033]

If you using XAMPP the ../ can be removed to read docs/pdf.pdf

[@TonnBR]

thre´s a way to do it with pagination on pdf scroll?

[@k40L1n]

Thanks Brad. Legendary !!

[@robbichandra6279]

Why its 'acces to XMLHttpRequest at 'file://home/robxx31/pdf/pdf.pdf' from origin 'null' has been blocked by CORS policy: cross origin request are only supported for protocol schemes:http, data, chrome, chrome-extension, chrome-untrusted, https.'

[@metaorior]

Would you please make a electron http auth to a database login ? Like laravel api with myslq integrated

[@luckynath2330]

how we add progress bar before pdf is opening if the pdf file size is bigger it takes time to open.

[@shakilkhanprogrammer]

Love your videos sir

[@faridsilva]

I came here by googling. This method renders pdf pages as image in a canvas, is it posible to render it as a real pdf with search capabilities and searched word highlighting? Thanks

[@cristiandanielcorreabeltra3584]

Hello, because I get an error that tells me failure to recover, if you download the file with the pdf and do not open it, I put another pdf and I get the same error, what I do not understand is because it does not load .... I'm sorry I'm new to this ... thanks

[@studiotancaartdancestudiot1300]

Hello, Thanks for great tutorials. Would You be so kind and make one about parsing PDF files to retrieve text and SIGNATURES (is PDF signed, who signed, when). Howto about signatures is nowhere to find.

[@SabbirHossain-vh4fo]

This is a wonderful video, it would be better if you add zoom in out function on it. :D

[@rizalfahlevi5720]

hello, how to add custom orientation (portrait/landscape mode) in pdf.js?

[@sitikantasatapathy]

How to add a zoom in/out button. Please help me achieving this

[@ajworkswebdesign2364]

thanks so much sir great work thanks lot

[@Loppy2345]

Quality content as always.

[@aminem2080]

thx Brad much appreciated tuts especialy this one. can any tell me how to search in pdf doc

[@baroiall9968]

Brad, I really loved this tutorial of yours. I was hoping if you could do an updated video on this, where, there is an input section to enter the URL of any online PDF..and the reader pulls the PDF document from that URL and displays it..and if the URL doesn't link to any PDF..it shows an error.. Thanks