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

【问题标题】：how to resolve print issue in SAPUI5 fiori client?如何解决 SAPUI5 fiori 客户端中的打印问题？
【发布时间】：2017-05-06 16:42:48
【问题描述】：

我开发了一个带有打印按钮的 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 的打印文档赋予嵌入样式？

【问题讨论】：

我试图理解这个问题：您不想打印整个页面，而只想打印页面的特定区域？ IIRC 打印完整页面应该可以通过设置菜单在 Fiori Client 中使用。
@Crew 是的，我只想打印页面的特定区域。
您在哪个平台上运行您的应用程序？是 iOS 还是安卓？
目前，我使用的是安卓，但我在IOS和安卓上都需要它。

标签： cordova printing sapui5 sap-fiori

【解决方案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');
                                                                             });
                }

您可以在 co 包含的 div 中添加您想要的 CSS。现在，您应该可以打印包含 CSS 的页面部分了。

【讨论】：