%20-%20Copy.png)
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
can you please update html code 2022
For healthy lifestyle, you should experience these Best small exercise bikes in 2021!
if you are annoyed by your fatness then you should check these small exercise bikes!
Do you know how to pass an image parameter to the API? I want to add a signature to the PDF, and the only way I came out with is to add an image component and to change the image (send new signature image) every time I generate a PDF
Hello, is it possible for the generated pdf to open in a new tab? If so, what modification can be made to this example to achieve that?
Thanks in advance!
Hello, is it possible for the generated pdf to open in a new tab? If so, what modification can be made to this example to achieve that?
Thanks in advance!
Hi, Salman, I get the following error. Please tell me why this error comes and how can I solve this issue. Thanks
undefined’s server IP address could not be found.
Hi Salman,
Hope you're doing great!
I'm really needing your response at the moment to this.
I've a form that has to be printed on pdf. I've followed all the instruction as mentioned above. But stuck at a place where while clicking on the download the pdf is not generating.
Can you please help me out in this?
I got good solution. thanks for posting.
i also have a reference: lawn
ואווו זה נהדר!!
יש אפשרות לעשות שיצא בקובץ אחד כמה עמודים? למשל אם אשלח מערך אובייקטים?
בשביל תוויות.
Hmmm… can't reach this page It looks like the webpage at data:application/pdf;base64,undefined might be having issues, or it may have moved permanently to a new web address. ERR_INVALID_URL
Hi everyone. I've 2 problems with that code:
When I click on button Get Pdf, automatically it appears up the write download (because of HTML I think);
2. I cannot download the pdf, the website always says network
error.
I'm working on it since 2 full days, but nothing. I hope you help me, thanks in advance.
I followed step by step the tutorial:
Back-end code:
// Code start import PDFGeneratorAPI from 'pdf-generator-api'; export async function pdf(nome, cognome, email) { let Client = new PDFGeneratorAPI( '<APIkey>', '<APIsecret>' ); Client.setWorkspace('<...@gmail.com>'); let obj = { "Nome" : nome, "Cognome" : cognome, "Email" : email, } let response = await Client.output('<......>', obj , 'pdf' , 'PdfName' , {"output" : "url"} ) return response.response } // Code end
In page code:
// Code start import { pdf } from 'backend/pdf.jsw'; $w.onReady(function () { var base64; $w('#Scarica').onClick(() => { let nome = $w('#Nome').value; let cognome = $w('#Cognome').value; let email = $w('#Email').value; pdf(nome, cognome, email).then(e => { base64 = e; base64 = 'data:application/pdf;base64,' + base64 let msg = { "conv": true, "dataUrl": base64 } $w('#html1').postMessage(msg); }); }); }); // Code end
HTML code:
<!-- code start -->
<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>
<!-- code end -->
Hi
When I submit the form, the HTML element does appear, however, when I click it to download, nothing gets downloaded. I noticed that the merge count does increase though. Any thoughts?
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
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?
@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?