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
// 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 }