CODEWITHSUNDEEP
cordovaprintingsapui5sap-fiori
Srinivas Gadilli
Srinivas Gadilli

Reputation: 342

how to resolve print issue in SAPUI5 fiori client?

I have developed an SAPUI5 app which is having a print button, when I click on the print button I have used window.print() with a specific area of the page.

var win = window.open("", "PrintWindow");
var headContents = $("head").html();
win.document.write('<html><head>'+ headContents + '</head><body>');
var bodyContent = $(".printArea").html();
win.document.write("<div style='width=220mm'>" + bodyContent + "</div>");
win.document.write('</body></html>');
setTimeout(function() {
                        win.print();
                        win.stop();
                    }, 2000);

it works fine in the browser, but when I open it in FIORI client it's not working. After reading some blogs, I understand that window.print is not working in FIORI client.And blogs suggesting that use Cordova Print Plugin instead of window.print.

then I have used Cordova Print Plugin as follows.

var headContents = $("head").html();  
var he = '<html><head><title>Form</title>' + headContents + '</head><body>';

    var bodyContent = $(".printArea").html();
    var co = "<div style='width=220mm' class='formpage'>" + bodyContent + "</div>";
                            var clo = "</body></html>";
                            var htmlpage = he + co + clo;

    cordova.plugins.printer.print(htmlpage, {
                                duplex: 'long'
                            }, function(res) {
                                alert(res ? 'Done' : 'Canceled');
                            });

I need whatever the CSS style sheets having in my HTML page should be in Print also. Cordova Print Plugin is suggesting that use embedded CSS or absolute stylesheet URL. as I am using SAPUI5 View I can't write inline CSS.

1)How can I give absolute URL of library.css in Cordova Print Plugin? 2)How can I give embedded style for print doc from SAPUI5 CSS?

Upvotes: 1

Views: 2811

Answers (1)

user6177399
user6177399

Reputation:

In regard to your first question, to get the absolute path to your external CSS, you will need to provide the full path to the CSS file including the domain. However, this step is not required if you want to print the whole page.

To print a section of your page including CSS, you will need to pass the string contents of your html elements to Cordova Print Plugin’s print function. In your second code example, I see that you have enclosed the bodyContent element into a div that contains embedded CSS styling. Since you would not be able to write embedded CSS, this is a good workaround.

However, the CSS syntax is not correct as it should be 

style=’width:220mm;’

instead.

Moreover, I recommend you to wrap the code segment into the print button’s onclick function. This way you have ensured all the DOM elements are already accessible.

So a possible solution is:

             function printArea() {
                                var headContents = $("head").html();  
                                var he = '<html><head><title>Form</title>' + headContents + '</head><body>';
                                var bodyContent = $(".printArea").html();
                                var co = "<div style=’width:220mm;’ class='formpage'>" + bodyContent + "</div>";
                               var clo = "</body></html>";
                              var htmlpage = he + co + clo;
cordova.plugins.printer.print(htmlpage, {
                                                                                            duplex: 'long'
                                                                             }, function(res) {
                                                                                             alert(res ? 'Done' : 'Canceled');
                                                                             });
                }

You can add the CSS you want in the div that co includes. Now, you should be able to print sections of your page with CSS included.

Upvotes: 1

Related Questions