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:
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 API
1. 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 // Code start
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
}
// Code end
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 Code
1. 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
1. Click on the HTML embed element 2. Click on "Edit code" button 3. Paste the following code [updated 02-dec-2018]
<!-- 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 -->
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
I tried to use the code but in console this error "Download in sandbox without user activation is deprecated and will be removed in M74. You may consider adding 'allow-downloads-without-user-activation' to the sandbox attribute list. See https://www.chromestatus.com/feature/5706745674465280 for more details."...
Please help !!!
hi guys i have a trouble with this, i followed the guide in every step and i had a trouble with the selectors on page code, don't know why, but selector repeats twice so i notice how selectors were properly written in an image a bit more ahead and solved that problem, but then whenever i click the donwload link, html elemente get filled with "sorry, we couldn't find that adress". and i can't get the pdf
and the weirdest thing is that i checked the other codes to see if there were other issues with selectors and then i notice the lines pn.id.id and pn.download.download so i removed one of each word and try it but now the result is that donwload link shows for a brief moment before html element get filled with "sorry, we couldn't find that adress" can anyone help me solve this problem? i need to deliver this by monday
Hi @Binyamin Meron, To accept Hebrew language Select the text and on the format section Select the Type dropdown to "SYSTEM"
PDF text link https://salman2301.wixsite.com/pdfnpm PDF link with Hebrew language https://pdfgeneratorapi.com/share/3729/21d3ab779536fd7b73bbf1bbae8b953c
Thank you I will try to link the base64 string to the db item.
Hi guys, I have applied this method and all it is working perfectly, however I have a trouble: I am using the output type (url) and I want to save the generated pdf directly into a database item (document) in the same moment in which the user is downloading the file through the url generated by the api. I have alredy tried to use the url as it is and save it into the database item throug wix-data however this attempt does not work. I have also created a free-access folder on google drive with a public address can I send the pdf directly to the folder?
Thx
Thanks guys Thank you@davebogan98 !! lol next time i should check the doc
You can:
let outputtype = "url" let pdf = await Client.output('39011', obj ,"pdf","directory",{ "output": outputtype }) return pdf.response
The NodeJS documentation does not show all the parameters that you can include on the output function. I looked at the source code and found that you can send the output function the template number (39011), the data to merge (obj), the document type to generate (pdf), a document name (directory), and the output type (outputtype = url). This will generate a valid url that can be used in wixLocation.to().
Also, because the PDF Generator API accepts JSON data, you can create reports from your collection data.
Very helpful. Just 1 question: why was there the need to use the html-component instead of calling all from the backend?
Great tutorial man!