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
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?
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
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(); }); }); });
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!
Is it available to send Pdf file to email after generation automatically?
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
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.
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,
Hey,
Great work.
Can I insert a full table data into the PDF?
Thanks
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
@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
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?
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!
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?
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
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.
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
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
@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?
I think the Container field is no longer in use. Maybe deprecated
// 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 }
Hello! Why do I get a "Failed - Network error" when I download the file I submitted?
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
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?
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?
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.
It's warning you can ignore it
How did you get this link https://pdfgeneratorapi.com/share/3729/b2f8b6725fe4279cc4934b64734645e5 I can't generate a link from pdfgeneratorapi
Check this comment on how to get the link from the pdf generator api https://www.salman2301.com/forum/main/comment/5c07640c092c5d01a6e3bdf3
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
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
@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?
@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?
For me, nothing wants to work. I've tried in a thousand ways and I don't know what's wrong. Maybe you could see what is wrong?
Hi Salmon, the PDF Generator API is great, however is very limited to what graphs it can use. Is there an alternative API that would work? Thanks