Nov 30, 2018

Edited: Dec 4, 2018

Create PDF using Wix code and pdf-generator-api

A PDF is created and downloaded when the user submited a form. Usage: Create a Invoice, Create a certificate for the user etc. on form submission. Sample Website link

Requirement: 1. Free account in pdfgeneratorapi Overall Layout:i) PDF GENERATOR API ii) Wix code Backend (npm - pdf-generator-api) iii)Page Code iv) HTML Embed code (Convert Base64 into PDF file) i) PDF GENERATOR API1. Goto pdfgeneratorapi 2. Sign In and goto Dashboard 3. Select the "Template" on the left side bar 4. Click on the "New Template" button, A new window open to edit the pdf File 5. Design the PDF and to create a variable use open and close Curly brackets as shown on this image

[This is a image of the pdf generator Editor {Name} where the variable will be later assign using wix code And there is one more variable,{Detail} to add the message]

6. Publish the template and Goto the "Templates" from the Dashboard

7. Copy the Template Id from the "Templates"

8. Copy the APIKey and APISecret from the "Account Settings"

9. Copy the WorkSpace Identifier from the "Admin Panel"

ii) Wix code Backend

1. Search and Install "pdf-generator-api" npm (Check this link for Installation guide and Node package manager npm) 2. Create a Backend Web Module "pdf.jsw". 3. Copy and paste the code

import PDFGeneratorAPI from 'pdf-generator-api';

export async function pdf(name, detail) {
 let Client = new PDFGeneratorAPI(
 '<APIkey>',
 '<APISecrect>'
    );
    Client.setWorkspace('<WorkSpace identifier>');
 let obj = {
 "Name" : name,
 "Detail" : detail,
    }
 let response = await Client.output('<Template Id>', obj)
 return response.response
}

4. Replace the <APIkey> , <APISecrect> , <WorkSpace identifier> and <Template Id> to your corresponding value grab from the pdfgeneratorapi site 5. Create a object for the variable in this case i have create an object "obj" with two Key "Name" and "Detail" and the corresponding value directly from the parameter of this async function "name" and "detail" iii)Page Code1. Drag and drop Input element, Text box element and Button in a new page 2. Also Drag and drop the "HTML embed" element from "more" section 3. Change the Property name as shown in the image

4. Copy and paste the below code

import { pdf } from 'backend/pdf.jsw';

$w.onReady(function () {
	var base64;
	$w('#btnSubmit').onClick(() => {
		let name = $w('#inName').value;
		let detail = $w('#inDetail').value;
		pdf(name, detail).then(e => {
			base64 = e;
			base64 = 'data:application/pdf;base64,' + base64
			let msg = {
				"conv": true,
				"dataUrl": base64
			}
			$w('#html1').postMessage(msg);
		});
	});
});

iv) HTML Embed code1. Click on the HTML embed element 2. Click on "Edit code" button 3. Paste the following code

[updated 02-dec-2018]

<script>
    window.onmessage = event => {
            if(event.data.conv) {
                if(document.getElementById('Download') === null || document.getElementById('Download') === undefined){
                var pn = document.createElement('a')
                pn.download = 'Download.pdf';
                pn.title = 'Download pdf document';
                pn.textContent = 'Download';
                pn.id ='Download'
                var s = document.getElementsByTagName('body')[0].appendChild(pn);
                pn.href = event.data.dataUrl;
                } else {
                    let d = document.getElementById('Download')
                    d.href = event.data.dataUrl;
                }
               document.getElementById('Download').click()
            }
        }
</script>

Overall codes

Congrats! That's it

Test this site right here

#npm #wixcode

Brett

Dec 1, 2018

Awesome tutorial! Is it possible to have the PDF be downloaded into a database, so you can connect it wherever you want on your site?

Salman2301

Dec 1, 2018

Thanks Brett, Wix only allow to upload files using "upload button" in the live site For now there is no other way upload files but there are some work around we can do 1. Using google cloud API to upload the Base64 into PDF and get back the pdf link and paste it on wix DB 2. Or simply saving the Base64 as a string on the wix Database

Salman2301

Dec 5, 2018Edited: Dec 5, 2018

Update on 5 DEC 2018 We can get back the URL directly instead of Base 64 and save it on the Database To do that change the backend code

 //BACKEND CODE
import PDFGeneratorAPI from 'pdf-generator-api';

export async function pdf(name, detail) {
 let Client = new PDFGeneratorAPI(
  '<APIkey>', 
  '<APISecrect>',
    );
    Client.setWorkspace( '<WorkSpace identifier>');
 let obj = {
 "Name" : name,
 "Detail" : detail,
    }
 let response = await Client.output(' <Template Id>', obj , 'pdf' , 'PdfName' , {"output" : "url"} )
 return response.response
}

There is no need of HTML embed element to convert Base64 into a PDF

//PAGE CODE
import { pdf } from 'backend/pdf.jsw';

$w.onReady(function () {
 var base64;
    $w('#btnSubmit').onClick(() => {
 let name = $w('#inName').value;
 let detail = $w('#inDetail').value;
        pdf(name, detail).then(e => {       //e="https://pdfgeneratorapi.com/share/3729/b2f8b6725fe4279cc4934b64734645e5"
            $w('#btnDownload').link = e;
            $w('#btnDownload').show();
            $w('#dataset1').setFieldValue('pdf', e);
            $w('#dataset1').save();
        });
    });
});

Adelaida Castro

Jun 25

Salman Hello! I am currently developing a pdf button according to these explanations. Everything looks good so far, however, this isn´t clear enough to me on how to generate the link. The backend code should generate the link automatically? How does it work? Thank you for your amazing tutorials!

Mm Aa

Dec 31, 2018

Is it available to send Pdf file to email after generation automatically?

Salman2301

Dec 31, 2018

Hello Yes, It's possible to send To do that you need a sendgrid account And use a the PDF in base64 Format Please refer this link on how to send an email using sendgrid platform written by myself https://support.totallycodable.com/en/article/send-a-template-email-using-sendgrid-npm-and-wix-code And this link for the code snippet

const sgMail = require('@sendgrid/mail');
sgMail.setApiKey(process.env.SENDGRID_API_KEY);
const msg = {
  to: 'recipient@example.org',
  from: 'sender@example.org',
  subject: 'Hello attachment',
  html: '<p>Here’s an attachment for you!</p>',
  attachments: [
    {
      content: 'Some base 64 encoded attachment content',
      filename: 'some-attachment.txt',
      type: 'plain/text',
      disposition: 'attachment',
      content_id: 'mytext'
    },
  ],
};

Please, let me know if you have any question, Thanks

links_555

Jan 15, 2019

Hello.

Thanks for the information, in the PDF API Page the Free Account let me just 100 Merges, there is no other way? and, i see in other example you can generate a "print page example", do you have the guide or code?, i apreciate so much.

Thanks again.

Salman2301

Jan 15, 2019

Hello links_555, You will get 100 Merges per months for free account If you want more you can upgrade it. Right now i don't have the code or instruction for print pages I understand the demand i will write it when i have some time If you want immediately, I am available for hire.

Please send an email to

salmanhammed77@gmail.com

I am happy to discuss

Thanks,

Benny Glaser

Mar 6, 2019

Hey,

Great work.

Can I insert a full table data into the PDF?

Thanks

Salman2301

Mar 6, 2019Edited: Mar 21, 2019

Yes, you can use a container element on the PDF generator API editor and send the Data as an Array with unique Id

code

let arr = [{
    "id" : "1",
     "textId" : "textValue 1",     
    },  {
     "id" : "2",
      "textId" : "textValue 2",
    }];
let obj = { 
       "containerId" :arr
       }

* containerId is the connected to the container * textId is connected to the text element attached to that container

Niort Celencia

Feb 17

@Salman2301 Hi Salman,

I tried to match an array with container or table in PDF Generator API, but I cannot find a way to name my container.

Thus, I'm not able to apply my array with an object. Could you explain me how to proceed or make a screenshot ?

This my page code :

let tableObjectifNm1 = $w("#tableObjectifNm1").columns

This is my backend code :

let obj = {

"TableObjectifNm1" : tableObjectifNm1,

...

Thanks

David Gabriel Lopez Duarte

Apr 24, 2019

hi salmam, thanks a lot for this tutorial you saved my life the other day, but my client has requested a new feature to his wix page, he wants me to add an option to upload an image of 128x128 and add it to the generated pdf along with input text, so i want to ask you if that's possible and how to do it?

Salman2301

Jun 3, 2019

Hey Sorry for the late replay That's possible for user

Drag the image element

On the right site instead of link

set a variable

{imageUrl}

and on the backend file in wix site

you will need to pass the image url

let obj = {
 "Name" : name,
 "imageUrl" : "https://someimageurl.here",
 }

Happy coding!

laurens.vandamme

May 23, 2019

Hi Salman, thanks for sharing this very useful info! I've tested this on my page but I get an error: (node:1) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.

Any thoughts on this?

Salman2301

May 23, 2019

I have hit the error too... I think i fixed by using .js file instead of .jsw You can even ignore it if it didn't cause a trouble Send me email with more detail salmanhammed77@gmail.com admin@salman2301.com

Turkey Travel Consultant

Aug 13, 2019

Hi @Salman2301 I have tried to fix this issue by using .js intead of .jsw but did not work. It still doesn't work it and it gives error saying that you have to use .jsw . Could please update, if there is something that I missed.

sharmakrishankant9

Jun 3, 2019

can you please tell me how can we print repaeter data using wix data..i am using wix data and unable to print using foreach loop

Salman2301

Jun 3, 2019

Hey Sharma,

You will need to use a container element in the pdf editor

https://docs.pdfgeneratorapi.com/#components-container

Select the container

on the right side

set the input variable anything

let say repeater

you will need to use a open and close curly brackets

{repeater}

and then on the backend file

pass and array of objects for the repeater varible

each objects must have id

like this

let obj = {
 "Name" : name,
 "repeater" : [{
     "id" : 1,
     "repeatingField" : "repeat1"
   },
   {
     "id" : 2,
     "repeatingField" : "repeat2"
   }],
 }

thank you

sharmakrishankant9

Jun 4, 2019

@Salman2301 but i hve added a pdf button on the frontend page and on button click i want to download the PDF .but how to iterate foreach into pdf() f romfrontend code?

sharmakrishankant9

Jun 5, 2019

I think the Container field is no longer in use. Maybe deprecated

sharmakrishankant9

Jun 4, 2019

// i dont want to print that data like item[0] item[1] i want that data automatically comes using foreach loop and then i want to print that in the pdf. Because of array when i run that using foreach then if there are like 4 rows in the database then pdf dowloaded 4 times but i want to download that 4 items in in PDF. Because if in future someone add more rows than they automatically download in the pdf .beacuse the no of rows can be changed.

Please check once and please help me if it is possbile.

Sorry for bad english.

Here is my code for frontend and backend .

//frontend page code

$w.onReady( async function () { let user2= $w("#dynamicDataset").getCurrentItem()._id; //console.log(user2); let base64; const item = await getprod(user2); const item1 = await getprod1(user2); console.log(item); $w('#btnSubmit').onClick(() => {

let itemsfinal=item[0]; /* employment History */ let address1=itemsfinal.address1; let address2= itemsfinal.address2; let city=itemsfinal.city; let employername= itemsfinal.employerName; let supervisorName=itemsfinal.supervisorName; let supervisorPhoneNumber=itemsfinal.supervisorPhoneNumber; let zipCode=itemsfinal.zipCode; let itemsfinal1=item[1]; let address11=itemsfinal1.address1; let address21= itemsfinal1.address2; let city1=itemsfinal1.city; let employername1= itemsfinal1.employerName; let supervisorName1=itemsfinal1.supervisorName; let supervisorPhoneNumber1=itemsfinal1.supervisorPhoneNumber; let zipCode1=itemsfinal1.zipCode; let itemsfinal2=item[2]; let address12=itemsfinal2.address1; let address22= itemsfinal2.address2; let city2=itemsfinal2.city; let employername2= itemsfinal2.employerName; let supervisorName2=itemsfinal2.supervisorName; let supervisorPhoneNumber2=itemsfinal2.supervisorPhoneNumber; let zipCode2=itemsfinal2.zipCode; /* Housing History */ //let item2=item1[0]; let item2=item1[0]; let startdate= item2.startDate; let housestreetAddress1=item2.streetAddress1; let landlordName= item2.landlordName; let landlordPhoneNumber= item2.landlordPhoneNumber; let reasonForLeaving =item2.reasonForLeaving; let rentAmount= item2.rentAmount; let item21=item1[1]; let startdate1= item21.startDate; let housestreetAddress11=item21.streetAddress1; let landlordName1= item21.landlordName; let landlordPhoneNumber1= item21.landlordPhoneNumber; let reasonForLeaving1 =item21.reasonForLeaving; let rentAmount1= item21.rentAmount; pdf(name,dp,address1,address2,city,employername,supervisorName,supervisorPhoneNumber,zipCode,address11,address21,city1,employername1,supervisorName1,supervisorPhoneNumber1,zipCode1,address12,address22,city2,employername2,supervisorName2,supervisorPhoneNumber2,zipCode2,startdate,housestreetAddress1,landlordName,landlordPhoneNumber,reasonForLeaving,rentAmount,startdate1,housestreetAddress11,landlordName1,landlordPhoneNumber1,reasonForLeaving1,rentAmount1).then(e => { base64 = e; base64 = 'data:application/pdf;base64,' + base64 let msg = { "conv": true, "dataUrl": base64 } $w('#html1').postMessage(msg); });

}); });

//backend code

import PDFGeneratorAPI from 'pdf-generator-api'; export async function pdf(name, middlename,lastname,phoneNumber,email,dob,bio,plan,fullName,dp,address1,address2,city,employername,supervisorName,supervisorPhoneNumber,zipCode,address11,address21,city1,employername1,supervisorName1,supervisorPhoneNumber1,zipCode1,address12,address22,city2,employername2,supervisorName2,supervisorPhoneNumber2,zipCode2,startdate,housestreetAddress1,landlordName,landlordPhoneNumber,reasonForLeaving,rentAmount,startdate1,housestreetAddress11,landlordName1,landlordPhoneNumber1,reasonForLeaving1,rentAmount1) { let Client = new PDFGeneratorAPI( 'dd2c03956082aec63ef7b4d3ca8c0ab99685638cedd77c170057f181d64e1c15', 'aaecd2248eee2f6ed732367036fdf0cd73d4a8381f98ee84b5a16d493ecbea60' ); Client.setWorkspace('sharmakrishankant9@gmail.com'); let obj = { "image":dp, "FirstName":name, "MiddleName":middlename, "LastName" :lastname, "Phone" :phoneNumber, "Email":email, "DOB":dob, "Bio":bio, "FullName":fullName, /*Housing History fields */ "address1":housestreetAddress1, "landlord":landlordName, "landlordph":landlordPhoneNumber, "leavingreason":reasonForLeaving, "rentamount":rentAmount, "startdate":startdate, "address2":housestreetAddress11, "landlord1":landlordName1, "landlordph1":landlordPhoneNumber1, "leavingreason1":reasonForLeaving1, "rentamount1":rentAmount1, "startdate1":startdate1,

/*employment history*/ //emp fields "empaddress1":address1, "empaddress2":address2, "empcity":city, "employerName":employername, "supervisorname":supervisorName, "supervisorph":supervisorPhoneNumber, "zip":zipCode,

"empaddress11":address11, "empaddress21":address21, "empcity1": city1, "employerName1":employername1, "supervisorname1":supervisorName1, "supervisorph1":supervisorPhoneNumber1, "zip1":zipCode1, "empaddress12":address12, "empaddress22":address22, "empcity2": city2, "employerName2":employername2, "supervisorname2":supervisorName2, "supervisorph2":supervisorPhoneNumber2, "zip2":zipCode2, } let response = await Client.output('46003', obj) return response.response }

FEU High School COMELEC

Jan 26

Hello! Why do I get a "Failed - Network error" when I download the file I submitted?

Salman2301

Jan 31

Get the url and try to go to that url again This happens when the either the URL is wrong or empty or the base64 is empty string I will also check my crendential

P. Ariel, mc

May 24

Hola! excelente!! es posible en una página dinámica usar esto a través de un botón que diga "descargar esta página en formato pdf" y lo descargue?

Paula Ciocani

Jun 18

Hi, It appears the download button, but it doesn't download the pdf. I have to right click on the link to open a new window where it shows the PDF. Can you please help me out here?

Paula Ciocani

Jun 18

I also get this error : (node:1) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.

Salman2301

Jun 18

It's warning you can ignore it

Paula Ciocani

Jun 18

How did you get this link https://pdfgeneratorapi.com/share/3729/b2f8b6725fe4279cc4934b64734645e5 I can't generate a link from pdfgeneratorapi

Salman2301

Jun 18

Check this comment on how to get the link from the pdf generator api https://www.salman2301.com/forum/main/comment/5c07640c092c5d01a6e3bdf3

Azmat

Jul 11

Hello @Salman2301 sir i want to integrate payment with pdf. If a visitor visit site and fill form that data store in pdf and it is working fine it create direct download button, but i want the payment button when he/she click on that then recieve a pdf link valid for 10 days to download . Is it possible?

Thanks

Azmat

Jul 11

Thanks

M Jordan

Jul 17

@Salman2301This is seriously amazing! Thank you! Is there any way to connect a button to download a screenshot or pdf of the contents of an iframe?

Dean Pitout

Jul 20

@Salman2301 Amazing tutorial, thank you. I have one question though. In my form I have an address input element which I want to include in the generated pdf. However, instead of the address being captured in the pdf, I have "array". How can I overcome this little issue?