top of page
Forum Posts
HP96
May 11, 2023
In Tips, Tutorials, Examples
Since there does not seem to be an article about how to create a custom PDF from data inside a database collection without using the PDF Generator API, I thought I would post my solution. This solution is free and fairly easy to copy and customize. I'm using the npm package pdf-lib to create the PDF-Document as well as the WIX Velo MediaManager API to upload and then download the PDF. In my example, I'm creating the PDF on a button click. After that, the PDF will be stored as a base64 string, which is passed to the savePDF() function: import { savePDF } from "backend/handlePDF";
import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';
import wixLocation from 'wix-location';
export async function button1_click(event) {
// Set filename
const fileName = "myExamplePDF";
// Create a new PDFDocument
const pdfDoc = await PDFDocument.create();
// Embed the Times Roman font
const timesRomanFont = await pdfDoc.embedFont(StandardFonts.TimesRoman);
// Add a blank page to the document
const page = pdfDoc.addPage();
// Get the width and height of the page
const { width, height } = page.getSize();
// Draw a string of text toward the top of the page
const fontSize = 30;
page.drawText('Creating PDFs in JavaScript is awesome!', {
x: 50,
y: height - 4 * fontSize,
size: fontSize,
font: timesRomanFont,
color: rgb(0, 0.53, 0.71),
});
// HERE YOU CAN CUSTOMIZE THE PDF AS YOU WISH (see pdf-lib documentation)
// Serialize the PDFDocument to Base64
const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
const dataUriPrefix = 'data:application/pdf;base64,';
const base64 = pdfDataUri.slice(dataUriPrefix.length);
savePDF(base64, fileName)
.then(downloadUrl => {
console.log(downloadUrl);
wixLocation.to(downloadUrl); //only works when published
})
.catch((error) => {
console.error("Error while saving the PDF: ", error);
});
} The savePDF() function receives the base64 string as well as the fileName and calls the uploadPDF() function, which transforms the base64 string into a buffer. The buffer can then be used by the upload() function to upload the file to the Media Manager. Once the upload is finished, the uploadPDF() function returns the file information that contain the fileUrl. This URL is passed to the getDownloadUrl() function, which returns a URL that can be used with the to() function. This opens the download bar in your browser. import { mediaManager } from 'wix-media-backend';
export function savePDF(base64, fileName) {
return new Promise((resolve, reject) => {
uploadPDF(base64, fileName)
.then((file) => {
getDownloadUrl(file.fileUrl)
.then((downloadUrl) => {
resolve(downloadUrl);
})
.catch((error) => {
reject(error);
});
})
.catch((error) => {
reject(error);
});
});
}
export function uploadPDF(base64, fileName) {
// create Buffer from Base64
const buffer = Buffer.from(base64, 'base64');
return mediaManager.upload(
"/UserUploads",
buffer,
fileName + ".pdf", {
"mediaOptions": {
"mimeType": "application/pdf",
"mediaType": "document"
},
"metadataOptions": {
"isPrivate": false,
"isVisitorUpload": false,
"context": {
"someKey1": "someValue1",
"someKey2": "someValue2"
}
}
}
);
}
export async function getDownloadUrl(fileUrl) {
const myFileDownloadUrl = await mediaManager.getDownloadUrl(fileUrl, 10);
return myFileDownloadUrl;
} Of course, you can customize the functions according to your needs. For example, you could add the moveFilesToTrash() function after the to() function to delete the file from the MediaManager after the download. Additionally, as mentioned at the beginning, you can use the wix-data API to add data from a collection to your PDF. I hope you found this explanation helpful and can apply it to your own website.
3
3
301
HP96
More actions
bottom of page