Vue Tutorial Pdf

Posted on  by admin

Vue js has become our most favorite front-end JavaScript framework. We always astonished with the great features it provides. The task of PDF generation becomes really easy with Vue JS. In this Vue JS PDF generate tutorial we will look at the entire process to generate PDF with Vue JS. First of all, we will create a new project as follows. If you are new to Vue then we suggest you check out Vue JS tutorial for beginners first. We need a library called jsPDF for this tutorial. So once the project directory is ready, move inside of it and save the library as follows. So the above command will save the library as a dependency. Now we are ready to move further. We have installed the router in our project. So we will directly move inside of the components folder and create a new component called Home. Now let’s add the markup for our component as follows. As you can see we have used bootstrap classes in the above markup. You can simply add the bootstrap CDN within the index HTML file. The above markup just contains an input field and a button. The input field is bonded with the data attribute name. On the other side, the button is also bonded with a click event. Now as our template part is ready so let’s move to the script part. First of all, before everything we need to import the jsPDFlibrary as follows. Now after that, we need to write code for our data and methods. As you can see we have created a string variable called name. It’s the one that’s bonded with our input field. Later that we have initialized an empty method called download. This is the place where we will add code to write and download our PDF file. A simple 4 lines of code will magically create the PDF file and write the contents and make it available for you to download. Now let’s see what each line of code does. In the first line, we have named the PDF file. Later that we have initialized the imported jsPDF object. Next, we have used the text method to write the name inside of our form field. This method can accept a few other parameters to add spacing and font size. Finally, the save method will download the file. So that’s all now let’s move to the final part of our Vue js PDF generate tutorial. Once the component is ready we need to add it to the router. So that we can display it on our specified URL. We would like to display it in the root URL. We can do it as follows. First of all, import the Home component from the components directory. Now let’s add it to our routes array as follows. So finally run the command below and go to localhost:8080. We have come to the end of our Vue JS PDF to generate a tutorial. Hope you have liked this one. This one is quite shorter but informative so don’t forget to share with your buddy developers. vue.js pdf viewer is a package for Vue that enables you to display and view PDF's easily via vue components. TBD: fix the demo. Same browser support as Vue.js 2. since v2.x, the script is exported as esm. The url of the given pdf. src may also be a string|TypedArray|DocumentInitParameters|PDFDataRangeTransport for more details, see PDFJS.getDocument(). The page number to display. The page rotation in degrees, only multiple of 90 are valid.EG: 90, 180, 270, 360, ..

updatePassword: The function to call with the pdf password. reason: the reason why this function is called 'NEED_PASSWORD' or 'INCORRECT_PASSWORD'. Document loading progress. Triggers when the document is loaded.