I am trying to convert HTML code to PDF by using jsPDF library. While I was able to install the library and to prepare a sample HTML, the conversion fails with the following error message:
"Blocked a frame with origin "null" from accessing a cross-origin frame."
My client doesn't have any back end where I could implement the PDF creation. Using external APIs to create the PDF would generate further cost to my client which I try to avoid and also many of them aren't even able to handle the size of PDF I need to create (tried html2pdf API as well as html2pdfrocket API).
const { jsPDF } = window.jspdf;
window.html2canvas = html2canvas;
const doc = new jsPDF();
var html = `
<html>
<head><meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<script type="text/javascript" src="wz_jsgraphics.js"></script>
</head>
<body>
<div style="position:absolute;left:50%;margin-left:-306px;top:0px;width:612px;height:792px;border-style:outset;overflow:hidden">
<div style="position:absolute;left:102.00px;top:114.96px" class="cls_002"><span class="cls_002">Nutzungsvereinbarung (Lizenz)</span></div>
</body>
</html>
`;
var x = doc.html(html).then(() => doc.output('datauristring'));
return x;
Does anyone have an idea how to solve the "Blocked a frame with origin "null" from accessing a cross-origin frame." issue? It is frustrating that with jsPDF there is a very strong and fee library but basically doesn't work at all in Retool due to this error.
Thank you for your reply. I was taking a look at the resource query "PDF Exporter". In general, this might work. But I have two issues there now (first one is critical):
The user needs to sign a contract and this is being done in Retool by using the "Signature" component. However, I wasn't able to find a way how to get the "Signature" into the PDF by using the "PDF Exporter". I was able to bring in external pictures stored in Google drive, but not the "Signature". Is there a way to make it possible?
The second problem I am facing is that the "PDF Exporter" downloads a PDF for the client. I don't want that. I want to use the Base64 of the PDF to attach it to an email, which I was able to get done. But I didn't find any way how to block the PDF from being exported. Is there any way how I can block the PDF from being exported/downloaded in the clients browser?
Regarding: carbone.io I checked this out as well already some days ago. Since it is not for free, it's not an option for my client. He pays for Retool and doesn't want to pay more just to bring the Retool signature onto the PDF.
To work around this issue I tried to upload the signature from Retool to imgbb.com by using their REST API. The upload works fine.
However, when I now try to link the image in the Retool PDF Exporter, the image won't be shown but instead a blue question mark.
I found a solution for linking the signature:
Using https://freeimage.host instead of imgbb.com seems working well. Freeimage.host provides an API. I use the API to upload the signature as Base64 and get a link in return. The link I integrated into the PDF. Now the signature is displayed correctly in the PDF.
Glad you were able to get the signature working @Reboon. As far as I can tell, it doesn't look like it's possible to run a PDF Exporter query without it downloading the pdf. Would you mind posting that part in the feature request section?
