Question

我开发了一个带有打印按钮的SAPUI5应用程序，当我点击打印按钮时，我使用了window.print（）和页面的特定区域。

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

它在浏览器中运行良好，但是当我在 FIORI客户端中打开它时，它无法正常工作。在阅读了一些博客之后，我了解到window.print在FIORI客户端中不起作用。博客建议使用 Cordova Print Plugin 而不是window.print。

然后我使用了Cordova Print Plugin，如下所示。

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

我需要HTML页面中的CSS样式表也应该在Print中。 Cordova Print Plugin建议使用嵌入式CSS或绝对样式表URL。因为我正在使用SAPUI5 View我无法编写内联CSS。

1）如何在Cordova Print Plugin中提供library.css的绝对URL ？ 2）如何从SAPUI5 CSS为打印文档提供嵌入式样式？

Answer 1

关于第一个问题，要获得外部CSS的绝对路径，您需要提供CSS文件的完整路径，包括域。但是，如果要打印整个页面，则不需要执行此步骤。

要打印包含CSS的页面部分，您需要将html元素的字符串内容传递给Cordova Print Plugin的打印功能。在第二个代码示例中，我看到您已将bodyContent元素包含到包含嵌入式CSS样式的div中。由于您无法编写嵌入式CSS，因此这是一个很好的解决方法。

但是，CSS语法不正确，因为它应该是

style=’width:220mm;’

代替。

此外，我建议您将代码段包装到打印按钮的onclick功能中。这样您就可以确保所有DOM元素都已可访问。

所以可能的解决方案是：

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

您可以在包含的div中添加所需的CSS。现在，您应该能够打印包含CSS的页面部分。

如何解决SAPUI5 fiori客户端中的打印问题？

1 个答案: