Generate DOCX/Word templates with JSON in React JavaScript - PDFTron WebViewer Series

in this video we're going to cover how to generate contracts invoices from any docx template that can be created inside of microsoft office or google docs we're going to grab the data in the json format from any data source merge the data into the template inside of our react app completely client-side without any server-side dependencies first i'm going to show you a quick demo of what i mean and then we're actually going to go ahead and jump into the implementation let's get started all right first things first let's take a look at the demo you can find this demo off our website pdftron.com if you just go under documentation and inside of documentation web and click on the samples advanced and then watch demo you can also find the source code i will be posting the source code to the github application that we're building again in the comments of the video so do check it out um so if i click on each demo we're going to go ahead and see here now i have a contract in front of me that has place holder strings and as you can see let's go ahead and fit it to width of the document as you can see that they're just curly brackets or squiggly brackets or mustache braces i've heard a number of different ways to refer to them if you have a preferred way do let me know in the comments below and as we can see that we have a placeholder for the logo we have date destination given name uh surname street address uh title as well as there is the name and there is sender name web your component can be embedded inside of your application we have built out a small poc of course your data is going to come from a data source however we do automatic detection of those fields this is just the docx templates that been uploaded we can also do pptx xlx so you know your word files your powerpoint or your excel files and then we do automatic detection of all the different placeholder fields with those uh squiggly brackets and then we can go ahead and enter any information that we want so for example date let's go and serve today's date today is november uh fifth and it's 2021 so we've got janice living at 187. can't even say that name um same thing with a surname maybe simon's miss and 225 park sent rochelle quebec and there's also some kind of lease problem and we're going to go ahead and insert a logo now this is just a relative path to our image and as well as providing some of the properties like widths and height of the image and the sender name is arnold smith so we're going to go ahead hit submit and as you can see instantaneously we went ahead and did the data merging again there was no trip to the server everything happened coinside in the browser as you can see we're able to grab the logo and kind of place it where we just you know originally thought it's going to go we also preserve all the different styling so as you see the janus and simon's is bolded uh the november 5th style of the data is slightly different as well and our name is bolded as well and as you can see that the content here reflowed so what i mean by the content reflow is that if we have any content that's larger than our original placeholder it's not going to run into the content on top of each other it's actually going to go ahead and just ensure that it's going to reflow and push all the text kind of down so there's no collisions and now what i can do is go ahead and download this and it's going to go ahead and download in a pdf format so now i have a pdf that has all the data inside of it and can no longer be modified so i can send it out in an email or whatever bad job i'm setting it up now the next step let's go ahead and build something similar except doing the letter let's actually do more of a real-life use case here and do an invoice and then inside of it we're going to have a table with multiple roles and let's see what happens when we insert so much data that it has to go to the page too let's go ahead and generate a sales quote so in front of me inside of google docs i created this document actually i didn't create it i just took it from existing template and all i had to do is just replace or add the squiggly brackets or the mustache brackets around the company name company address fines i added customer names as well dates and expiry dates and for the table uh it's a very simple table it has three columns or sorry four columns inside of it uh with the build items that we're going to be kind of placing for this and we have a total also it has a sum of the subjects to use as well again the company name is mentioned here a couple times so it's just a single placeholder there's also website again the formatting here doesn't really matter and as long as you use kind of doubles quickly brackets you can also go ahead and use a different separator and there's an api that you can actually go ahead and swap out for instead of using just so you don't have to let's say you have an existing templates and so you don't have to kind of go back and replace them all and then we'll also have agreed unaccepted name title and a date um for signing so then let's go ahead and i'll kind of walk you through so again this is just building up on top of our existing webviewer react sample that we have on our github and what i prepared is i prepared json data for all the different kind of placeholder items so company name customer names address lines dates expire dates the quote number the website the build items and the site of the build items as you can see we're doing insert roles and i'm passing it an array consisting of an additional array for kind of every single row and here we have the four items inside of it for the four columns we have three apples for five bucks um well actually let's fix the math here with the math now fixed let's go ahead and kind of finish walking through so we have three apples five bucks 15 bucks total oranges two for five bucks by the way very expensive apples very expensive oranges and the total was 25 and we have 30 days to pay it okay let's take a look what it looks like inside of the code so instead of use effect that kind of execute once we have our webviewer initialized and we're going to be loading up that quote.x that we just downloaded from the google docs that i just generated and inside of it we're waiting for the document to be fully loaded after it is fully loaded we're going to go ahead and just apply the template value from the json data now it is possible as well to automatically detect all the different keys and let's say based on the keys on the document you can then perform the necessary queries so the workflow here could look like that we go ahead we load up the template get the keys from it find all the relevant keys that we need to be querying our database for get the data and then build the json and apply the template values now let's flip over to the react app and here we see that we have all the different fields that are populated so we'll have the company name we have the address we have the quote number the prepared date the expiry date um my name and address uh we have the quantity of apples with the correct totals kind of rolling up to the 25 bucks we also kind of put in the different subjects for the 30 days uh delivered by the pdf facility here's our website that people can go to and it's automatically linked so if i click it boom we're at pdftron.com um and there is agreed and accepted now here you know this is a pdf that we could send it out but there's no interactivity yet so we can actually go ahead and just flip on over to the forms tab where i can define the areas where i want someone to go ahead and insert their name i can also and i can call this form field name [Music] here i can go ahead and set the different field flags if i wish maybe read only maybe multiplying or required go ahead and press ok and press ok now one other thing that's actually missing maybe a signature block right here so we're going to go ahead and define the area where the user can sign somewhere here and we're going to go ahead and say sign okay perfect so we're going to go ahead and apply fields and after we hit apply as you can see this document is not just the sales quote with the pre-populated numbers inside of them but actually has a signature block that we can go ahead and sign and we can kind of fill in our name title and d so let's actually take a look and see what happens if we're going to go ahead and overflow this table and how the all the contents are gonna refill so let's say in here i'm just gonna go ahead and instead of just getting apples and oranges and by the way let's go ahead and format it so it reads a little bit easier um we're gonna just insert just a whole bunch of rows for oranges and it did as you can see here um we inserted crazy amount of rows and the table is dynamic and as you can see that it intelligently recreated the header for the specific table and inserted the items pushed the content down and created any additional pages as needed without any collision inside of it and this was happening extremely fast right inside of our react app well that's all for this video i really hope you enjoyed it do reach out if you have any questions in the comments below i'm really responsive thanks so much

Channel: Apryse

Views: 19,113

Keywords:

Id: pk5qI6WB5FM

Length: 10min 34sec (634 seconds)

Published: Sat Nov 06 2021