Wie löst man das Problem im SAPUI5 fiori Client?

Ich habe eine SAPUI5-App entwickelt, die eine Druckschaltfläche hat. Wenn ich auf die Druckschaltfläche klicke, habe ich window.print() mit einem bestimmten Bereich der Seite verwendet.Wie löst man das Problem im SAPUI5 fiori Client?

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);

es funktioniert im Browser in Ordnung, aber wenn ich es in FIORI-Client öffnen es funktioniert nicht. Nach dem Lesen einiger Blogs, verstehe ich, dass window.print funktioniert nicht in FIORI-Client.Und Blogs empfehlen, dass Cordova Print Plugin anstelle von window.print verwenden.

dann habe ich Cordova Print Plugin wie folgt verwendet.

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'); 
          });

ich brauche, was die CSS-Stylesheets in meiner HTML-Seite, die sollten auch in Print sein. Cordova Print Plugin schlägt vor, eingebettete CSS oder absolute Stylesheet-URL zu verwenden. wie ich SAPUI5 Ansicht verwende Ich kann nicht Inline-CSS schreiben.

1) Wie kann ich die absolute URL von library.css im Cordova Print Plugin angeben? 2) Wie kann ich embedded style für print doc von SAPUI5 CSS geben?

Quelle

2017-05-06 Srinivas Gadilli

Ich versuche, das Problem zu verstehen: Sie möchten nicht die komplette Seite drucken, sondern nur einen bestimmten Bereich der Seite? IIRC Drucken der vollständigen Seite sollte in Fiori Client über das Menü Einstellungen verfügbar sein. –

@Crew Ja, ich möchte nur Druck für den bestimmten Bereich der Seite geben. –

Auf welcher Plattform führen Sie Ihre App aus? Ist es iOS oder Android? –

In Bezug auf Ihre erste Frage, um den absoluten Pfad zu Ihrem externen CSS zu erhalten, müssen Sie den vollständigen Pfad zur CSS-Datei einschließlich der Domäne angeben. Dieser Schritt ist jedoch nicht erforderlich, wenn Sie die gesamte Seite drucken möchten.

Um einen Abschnitt Ihrer Seite einschließlich CSS zu drucken, müssen Sie den String-Inhalt Ihrer HTML-Elemente an die Druckfunktion des Cordova Print Plugins übergeben. In Ihrem zweiten Codebeispiel sehe ich, dass Sie das bodyContent-Element in ein div eingeschlossen haben, das eingebetteten CSS-Stil enthält. Da Sie eingebetteten CSS nicht schreiben können, ist dies eine gute Problemumgehung.

Allerdings ist die CSS-Syntax nicht korrekt, wie es

style=’width:220mm;’

stattdessen sein sollte.

Darüber hinaus empfehle ich Ihnen, das Code-Segment in die Onclick-Funktion der Druckschaltfläche zu wickeln. Auf diese Weise haben Sie sichergestellt, dass alle DOM-Elemente bereits verfügbar sind.

So eine mögliche Lösung ist:

   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'); 
                      }); 
       }

Sie die CSS hinzufügen, können Sie in der div möchten, umfasst co. Jetzt sollten Sie in der Lage sein, Abschnitte Ihrer Seite mit CSS zu drucken.

Quelle

2017-05-15 16:21:20

Wie löst man das Problem im SAPUI5 fiori Client?

Antwort

Verwandte Themen