Hi Folks,Greetings!
Please see below the screenshot of my tabular sheet design in Container (Outsystems widget)
this sheet is implemented in container so I would like to convert it into pdf.Because this sheet should be print by printer so for that I need to convert this into pdf. If any other idea you people have to make hard copy of this sheet so kindly share me.
Also please let me know you expect more details from my side.
Thanks
Hi Folks,I got the simple way to convert screen to PDF without Htm2PdfConverter component using
"window.print()"
Only need to create new screen and in Preparation action or any button action invoke RunJavaScript action with only "window.print()" this code.
This way fulfill my requirement. (Y)
@Meer Imtiyaz have you managed to print more than 1 page? this function only supports the first page print
in the page want to display the content in container into pdf document, and that file should be downloaded, from the below script pdf is downloading but data or 2 tables displaying in page is not downloading into the pdf page , when click on button . below is the js script code -
var element = document.getElementById($parameters.ContainerId);
var opt = {
image: { type: 'png', quality:1 },
margin: [0.5,0.15],
filename: $parameters.Filename,
html2canvas:{ scale:2},
jsPDF:{unit:'in' ,format:'a4',Orientation:'portrait'},
};
html2pdf(element).set(opt).from(element).toContainer()
.then(function(){
var doc = $('.html2pdf__container');
doc.find('.show-on-export').show(); // show content hide by CSS.
})
.save()
//}
.outputPut()
.then (function(pdf){
$parameters.Pdffile=btoa(pdf);
.then(function(nextstep){
console.log($parameters.Pdffile);
});
Hi Meer,
Are you working on a reactive web app or a traditional web app?
If it's a traditional web app you can use the html2pdfConverter forge component to create a pdf of your screen.
If it's a reactive web app it'll be a bit trickier since there are no pdf components for it yet but you might try your luck with any of the mobile app components instead.Kind regards,Glenn
glenn michiels wrote:
Hi glenn michiels,Thanks for your reply.
I have checked multiple post on forum related to same my query and also checked html2pdfConverter but didn't used it because its name indicates html to pdf and in my scenario there is one part i.e. only one container have to convert to pdf.Let me check html2pdfConverter, can there be option to convert container to pdf and then will get back to you.
What you can do is isolate that container and its associated logic in a webblock. That way you can use that block in your current screen but also in a new screen that contains nothing else. This new screen would then be the one you use with the Html2PdfConverter component.
Aurelio Junior wrote:
Hi Aurelio Junior,Thanks, on this way I am going to implementing. But there asking for configuration so can you please tell the steps how to configure Html2PdfConverter component.
Meer Imtiyaz wrote:
Hi Meer,You can follow the instructions on screen when opening the html2pdf component in the browser. Once the screen loads you can click on installation instructions and it will guide you through the configuration process.Regards,Glenn
In Mobile I use the PDF Generator Plugin to create PDFs from screens. Perhaps you can also use this?
Just keep in mind that this approach will require an additional step from your users (the print dialog) and that they have some sort of "print to pdf" printer installed on their machines. Components like Htm2PdfConverter allow your users to simply click a button and immediately download a pdf file.
Hey ,
how to default to screen add header and footer in window.print() approach.
Regards,
Sowndarya
Hey...
You can use KendoJs, please see details below
1. create web block and use expression and Paste following link text and mark Expression Escape content property "No"(Then finally add this web block in screen where converting page to PDF)
"<link rel='stylesheet' href='https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common-material.min.css' /><link rel='stylesheet' href='https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.material.min.css' /><script src='https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js'></script>"
2. Added following code on Screen javaScript property
function GeneratePDF(Container,fileName){
kendo.drawing.drawDOM($("#"+Container), {
paperSize: "auto",
}).then(function(group){
kendo.drawing.pdf.saveAs(group, fileName+".pdf");
}
3. For download to created pdf, I have taken one link button with "onclick " action in Extended Properties and call following Text in value
"GeneratePDF('"+PDFCnt.Id+"','"+"Filename"+"');"
4.if you want to add some name or date with the pdf filename use this format
"GeneratePDF('"+InvoiceContainer.Id+"','"+"Invoice Details_"+VendorInvoiceList.List.Current.Invoice.DateContractors+"""');"
Cheers.. (Y)
Hi.
Have you tried this component?
https://www.outsystems.com/forge/component-overview/9761/reactive-print-pdf-button
In a Reactive application, you can indicate which container will be rendered on the output pdf.
I don't know how it can behave with the table you indicated.
Let me know if it can be a solution for you and how it behaves with that layout.Greetings,Gianluca
Question is, how to redirect this to an file without pressing the button.
Hello Jens,
Try modifying the component, to call this piece of code directly in the OnReady event, instead of on button click (which you can also remove):
I hope the advice can help you.
GB