Integrating PDF and DOCX Viewing and Editing into Next.js using WebViewer

hey my name is andy i'm an associate product manager at pdf shawn and today i'll be going over how you can embed web viewer which will allow you to view and edit pdfs into your very own next gs app all right let's get started so first let's navigate to an empty folder and open up a terminal of your choice here i'm using the command window let's start a next gs project by using npx create next app it's going to ask you a couple questions so let's just name this project the default my app and we'll wait for it to install okay so everything finished installing so what i'm going to do is i'm going to navigate to the actual folder and then run the command yarn def to start up the development server and we'll just wait for that to build and compile all right there we go so let's navigate to localhost 3000 here to double check that everything is working and this is what you should get here so to actually import the web viewer into the project let's start by opening this project in vs code so i've done so right here you can see the folders listed here we got node modules pages public and styles and the page that we were just looking at is right here so this is what we'll be modifying but before that let's install the webviewer library by using npm install pdftron webviewer and let's also save that as the dependency so it looks like it installed uh let's just double check that it should be right here and the next step that we have to do is we have to copy uh this folder here so core and ui under the public folder into our actual next.js project now if you are cloning the github report repository there should already be a script in there to automate copying these files if you just run npm install but if you're doing this manually and importing this into a next gs product by yourself this is something you'll have to do on your own so let's select these folders and copy both and then put them into a public and to better organize this let's also create a folder called lib for library and put these two folders into that one awesome okay now we're ready to actually start writing some code so i'm gonna start off by deleting everything in here and uh pasting the template that we have on our github this is also in our guides as well which everything will be linked down in the description below so first we imported two functions here from react and then created a functional component just called home page then we initialized a variable here called viewer using one of the functions from react which references a jsx object inside the dom right now we're just using null to initialize it and then using the use effect hook which runs whenever a component mounts we import the web viewer library and notice that the import happens here instead of up here which is usually where libraries are imported and that's because um nextgs does a server-side rendering by default and we need to import this library after this hook because this hook ensures that the component mounts or renders before all this is done and because the library has dependencies on knowing where the window for the component is we have to initialize it here so after that's done after the library is imported we call the web viewer constructor here this takes in a options object as well as an html object and you can see here that we included the path to the libraries for the files that we copied earlier as well as an initial document notice that both of these file paths are with reference to the public folder so that's why this is lib and for the initial document here since this was copied from github we don't have this file here so you can also use a link which i have and this is a link to just one of our pdfs after that the we get an instance back of webviewer which we can use to call all the various apis which are documented on our website which will also be linked down below and that's all there is to it in terms of actually uh initializing and importing webviewer to display the component we then return a div with a couple class names a header as well as the actual reference to the viewer notice here that there's also a bit of css and styling applied in in order to make the web viewer show up and since i stopped the server from running earlier let's just start the server back up by using yarndev you can also use uh npm run dev as well and then let's go to localhost 3000 and you can see here that webviewer is here with the pdf that we imported so yeah that's it that's how you embed a pdf john's webviewer into an xgs application if you also want to use other frameworks or modify pdfs there's quite a lot of documentation online you just go to pdftron documentation i think it's guides yeah guides and you can see here that we have a lot of different functions and apis for a lot of the things that you may need to do with pdfs such as creating uh creating them creating forms page manipulation uh editing page content extraction etc etc so yeah there's a lot of documentation across here and that's pretty much it if you have any questions let us know down in the comments below thanks for watching and see you around

Channel: Apryse

Views: 13,457

Keywords: nextjs, next js, nextjs tutorial, next.js, react, next js tutorial, programming, programming tutorial, javascript, javascript pdf, html pdf, pdf, website pdf, pdf.js, pdf viewer, react pdf, typescript pdf, pdf editor, pdf javascript, react hooks pdf, ms office react, docx react

Id: 8IiIXeTOl_o

Length: 6min 29sec (389 seconds)

Published: Tue Oct 05 2021