Now with the help of npm we can easily create a PDF using 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. Sample Website link
Requirement:
- 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 API
- 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
- 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
// Code start
import PDFGeneratorAPI from ‘pdf-generator-api’;
export async function pdf(name, detail) {
let Client = new PDFGeneratorAPI(
‘’,
‘’
);
Client.setWorkspace(‘’);
let obj = {
“Name” : name,
“Detail” : detail,
}
let response = await Client.output(‘’, obj)
return response.response
}
// Code end
- Replace the , , and 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 Code
- 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
// Code start
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);
});
});
});
// Code end
iv) HTML Embed code
- Click on the HTML embed element 2. Click on “Edit code” button 3. Paste the following code [updated 02-dec-2018]
Overall codes
Congrats ! That’s it
Original post : https://www.salman2301.com/forum/wix-code-advance/create-pdf-using-wix-code-and-pdf-generator-api
Let me know if you have any questions
