Olá Joyce. Estou em busca de um gerador de PDF para um projeto. Tenho uma lista de itens com quantidade, nome do produto e valor, e um totalizador. Gostaria de gerar um PDF para imprimir ou enviar pedido por e-mail.
Temos algo sendo desenvolvido?
hi @sam1
Tried using the pdf-lib.
Here’s what I have tried:
- Added the PDFlib package through npm.
- Used the sample code given on https://pdf-lib.js.org/
- Followed it up with code provided by you. Here the final code:
async function createPdf() {
const pdfDoc = await PDFDocument.create()
const timesRomanFont = await pdfDoc.embedFont(StandardFonts.TimesRoman)
const page = pdfDoc.addPage()
const { width, height } = page.getSize()
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),
})
const pdfBytes = await pdfDoc.save()
}
createpdf().then((pdfBytes) => {
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
// Create a Blob URL for the Blob
const pdfBlobUrl = URL.createObjectURL(blob);
// Create a hidden iframe element
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = pdfBlobUrl;
// Append the iframe to the document body
document.body.appendChild(iframe);
// Wait for the PDF to load in the iframe
iframe.onload = function() {
// Call print on the iframe's content window
iframe.contentWindow.print();
// Optionally, remove the iframe after printing
setTimeout(function() {
document.body.removeChild(iframe);
}, 2000);
};
});
The workflow goes through but nothing is done.
Could you please post a tutorial or a video on how did you use the same?
1 Like
Hello…
You can use BuildShip to create a PDF generation workflow.
Is it also possible to use BuildShip generating a PDF of a authenticated page? Or make it secure in some way and not public.
I want to create a pdf containing data from a Supabase collection with RLS and creation on a private page.
I thought using the npm plugin and jsPDF to generate the PDF on client side using a custom code action.
Any thoughts or concerns about that approach, especially in terms of security? My thought was that this should not be a problem as no data is saved or manipulated on client side and just displayed.
Hi @Till ,
It sounds like you’re looking for something similar as I did:
I have a weweb page that acts as a PDF-template. A page workflow obtains the parameters passed through the URL and uses that to call upon the backend (in those parameters you can include a security code also).
Then I have a backend api (with instructions) call upon a Make.com webhook (which activates a PDF.co-module to print an URL-to-PDF based on the instructions - and then uploads the PDF to the backend).
So the security would be: you have the backend pass a security code in its instructions to PDF.co and PDF.co calls upon the backend (via Weweb) with that security code (the backend responds with dynamic data only after validation of the security code). So anyone looking at your weweb page would see a meaningless/empty page.
Hopefully this helps you.
There are so many ways how you can do this. Unfortunately, for now, they all involve external libraries and some code.
Here is a simple example of converting a WeWeb dynamic page to editable/downloadable PDF. In this particular case I use the html2canvas library.
1) First populate the page with the data you want - in my case it is a form which is populated by a Get request from Xano.
2) Set up the PDF conversion function in the same workflow which loads on page load.
// Function to load scripts
function loadScript(url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
// Load required libraries
Promise.all([
loadScript('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js'),
loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js') // Explicitly include html2canvas
]).then(() => {
console.log('Libraries loaded successfully');
// Define the PDF generation function
window.generatePDF = function () {
console.log("PDF generation started");
const { jsPDF } = window.jspdf;
let element = document.getElementById('wrapper');
if (!element) {
console.error("Element with id 'wrapper' not found");
alert("Could not find the content to generate PDF. Please contact support.");
return;
}
// Fetch dynamic values from WeWeb variables
const jobNumber = variables[/* selected_job */'15965aae-83ef-4a33-988a-bd162a05b627']?.['job_number'] || 'UnknownJobNumber';
const companyName = variables[/* selected_job */'15965aae-83ef-4a33-988a-bd162a05b627']?.['_company']?.['name'] || 'UnknownCompany';
const jobTitle = variables[/* selected_job */'15965aae-83ef-4a33-988a-bd162a05b627']?.['Position_Title'] || 'UnknownTitle';
// Construct the dynamic file name
const fileName = `${jobNumber}-${companyName}-${jobTitle}.pdf`;
// Create a new jsPDF instance
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'mm',
format: 'a4'
});
try {
// Use jsPDF's html method to render HTML directly into the PDF
pdf.html(element, {
callback: function (doc) {
console.log("PDF generation complete");
doc.save(fileName); // Use the dynamic file name
},
x: 10, // Horizontal margin
y: 10, // Vertical margin
html2canvas: {
scale: 0.15, // Adjusted scale for smaller fonts
useCORS: true // Enable CORS for external resources
}
});
} catch (error) {
console.error("Error generating PDF:", error);
alert("An error occurred while generating the PDF.");
}
};
}).catch(error => {
console.error('Error loading libraries:', error);
alert("There was an error preparing the PDF generation. Please refresh the page and try again.");
});
console.log('PDF generation script loaded');`
3) Trigger the PDF conversion with a button and a simple workflow:
That’s it! You will get a an editable PDF as a result.
This solution has lots of limitations - f.e you can only convert what is on your screen but for the most simple use cases it works like a charm.
2 Likes
Thanks for this solution! However it is a more complex as the PDF needs to meet some formatting standards, which can only be achieved with certain libraries that are not available there.
I am now working on a solution including Firebase Cloud Functions and the REST API Plugin. This solution is cheap, easy to maintain as no hosting is needed (compared to a node/express app), every npm library works and once setup, multiple API endpoints could be implemented (also for other task needed to be done in the backend).
Probably this setup could be a solution for others here, especially when you are currently using third party solutions.