Hi,
A while ago i searched the forum to create a PDF in Wix.
but i came up empty handed…
Now i found a way to generate a PDF using the Embed HTML frame and jsPDF.
This only works for premium users.
- add this HTML/JS Code to an embed HTML frame
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ejs@3.1.5/ejs.min.js"></script>
</head>
<table id= "theBody">
<span class="table"></span>
</table>
<script type="text/javascript">
//Needed to change image to PDF format string
function getDataUri(url)
{
return new Promise(resolve => {
var image = new Image();
image.setAttribute('crossOrigin', 'anonymous'); //getting images from external domain
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
//next three lines for white background in case png has a transparent background
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#fff'; /// set white fill style
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas.getContext('2d').drawImage(this, 0, 0);
resolve(canvas.toDataURL('image/jpeg'));
};
image.src = url;
})
}
//To have the right PDF format
var splitRegex = /\r\n|\r|\n/g;
jsPDF.API.textEx = function (text, x, y, hAlign, vAlign) {
var fontSize = this.internal.getFontSize() / this.internal.scaleFactor;
// As defined in jsPDF source code
var lineHeightProportion = 1.15;
var splittedText = null;
var lineCount = 1;
if (vAlign === 'middle' || vAlign === 'bottom' || hAlign === 'center' || hAlign === 'right') {
splittedText = typeof text === 'string' ? text.split(splitRegex) : text;
lineCount = splittedText.length || 1;
}
// Align the top
y += fontSize * (2 - lineHeightProportion);
if (vAlign === 'middle')
y -= (lineCount / 2) * fontSize;
else if (vAlign === 'bottom')
y -= lineCount * fontSize;
if (hAlign === 'center' || hAlign === 'right') {
var alignSize = fontSize;
if (hAlign === 'center')
alignSize *= 0.5;
if (lineCount > 1) {
for (var iLine = 0; iLine < splittedText.length; iLine++) {
this.text(splittedText[iLine], x - this.getStringUnitWidth(splittedText[iLine]) * alignSize, y);
y += fontSize * lineHeightProportion;
}
return this;
}
x -= this.getStringUnitWidth(text) * alignSize;
}
this.text(text, x, y);
return this;
};
// when a message is received from the page code
window.onmessage = (event) => {
console.log("event started")
download()
};
//Sending an email
function sendEmail(pdfBase64) {
Email.send({
SecureToken : "xxxxxxxx-xxx-xxxx-xxxx-xxxxxxxxxxxx", //Secure token made in SMTPJS.com
To : "youremail@provider.com",//Email to send to, or multiple "xxx@xxx.xx,xxx@xxx.xx"
From : "email used on SMTPJS",//Email the mail should be sending from
Subject : "SUBJECT OF THE EMAIL",//Subject of the mail
Body : `
This is the body of the message,
Using HTML you can style it as you need.
Using `` to use HTMl over multiple lines
`,
Attachments : [
{
name : "documentname.pdf", //Name of the pdf
data : pdfBase64 //datauristring
}
]
}).then(
message => alert("Ur email has been sended.")
);
}
async function download() {
var lineHeight = 5;
var logo = 'https://upload.wikimedia.org/wikipedia/en/thumb/7/76/Wix.com_website_logo.svg/311px-Wix.com_website_logo.svg.png'
var pdf = new jsPDF('p');
var myImage = await getDataUri(logo);
pdf.setFontType('normal')
pdf.setFontSize(10)
pdf.setTextColor(7, 12, 168)
pdf.text(10,10,"More info") //X,Y,text
pdf.text(10,10+(lineHeight*1),"About JSPDF")
pdf.text(10,10+(lineHeight*2),"Can be found")
pdf.text(10,10+(lineHeight*3),"at https://mrrio.github.io/jsPDF/examples/basic.html")
pdf.text(10,10+(lineHeight*4),"Or at the documentation website")
pdf.text(10,10+(lineHeight*5),"https://artskydj.github.io/jsPDF/docs/jsPDF.html")
pdf.addImage(myImage,'png',10,10+(lineHeight*6),155,60) // converted image,X,Y,WIDTH,HEIGHT
//var pdfpdfBase64 = pdf.output("datauristring")
//sendEmail(pdfpdfBase64)
//pdf.output("datauri")
pdf.save("test.pdf");
};
</script>
</html>
Add a button to your page and add the following code.
$w("#yourhtmlelementname").postmessage("")
To send mails,
Go to SMTPJS
Scroll down to Security and press Encrypt SMTP Credentials
Fill in the form and press generate secure token.
Use that token in the sendMail function
Configure it as needed and use the following lines to send the mail.
var pdfBase64 = pdf.output("datauristring")
sendEmail(pdfBase64)
When using the postmessage you can add data to it.
to run different functions in the HTML frame
$w("#yourhtmlelementname").postmessage("sendmail") // or "download" or "opennewwindow"
var todo = ""
window.onmessage = (event) => {
todo = event.data // event.data = postmessage data
};
if(todo === "sendmail"){
var pdfpdfBase64 = pdf.output("datauristring")
sendEmail(pdfpdfBase64) // Sends the Email
} else if(todo === "download"){
pdf.save("test.pdf"); // saves the PDF
} else if (todo === "opennewwindow"){
pdf.output("dataurlnewwindow") // Opens the PDF in a new window
}
Output example:
Hope this will help some people.
If there are any questions ,
Feel free to ask,
I created a table where i take the data to the htmlframe.
And add in a new selfmade table.
Kind regards,
kristof.
