I have an app where i am using a custom component to generate PDFs from RichTextEditor. I was working perfectly when i was on version @2.103.7 But after upgrading to version @3.28.4 it doesn't work anymore. I'm unable to open it in a new window and download it. What is the issue and how can i resolve this ?
Here screenshot of my custom component:
and here is the Iframe code :
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- put any fonts you need here -->
<style>
<!-- here is where you'll need to style your html for printing, especially if you're also displaying it natively inside of your retool app
-->
</style>
</head>
<body>
<script src="https://cdn.tryretool.com/js/react.production.min.js" crossorigin></script>
<script src="https://cdn.tryretool.com/js/react-dom.production.min.js" crossorigin></script>
<!-- get the HTML to PDF bundle -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>
<script>
// subscribe to model changes
window.Retool.subscribe(function (model) {
if (!model) { return }
var content = model.content;
// move our printed content into an element we can access later
document.getElementById("templateContents").innerHTML = content;
});
function pdprint() {
// our function to generate and display the pdf in a new window
console.log('clicked');
var opt = {
margin: 0.5,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
window.html2pdf().set(opt)
.from(document.getElementById("templateContents").innerHTML)
.toPdf()
.output('bloburl')
.then(function (pdfas) { window.open(pdfas) });
}
</script>
<!-- now, you just need a button to trigger the printing (you must take an action to open the new window) -->
<button id="pdfDownloadLink" href="" onclick="pdprint(); return false">Download PDF</button>
<!-- ... and a place to put our html conten -->
<div id="templateContents" style="display:none"></div>
</body>
</html>
