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

问题描述：

我开发了一个SAPUI5应用程序，它有一个打印按钮，当我点击打印按钮时，我已经使用window.print（）与页面的特定区域。如何解决SAPUI5 fiori客户端中的打印问题？

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

我需要任何CSS样式表在我的HTML页面中应该在打印也。 Cordova Print Plugin建议使用嵌入式CSS或绝对样式表网址。因为我正在使用SAPUI5查看我无法写入内联CSS。

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

我在尝试了解问题：您不想打印完整页面，而只是打印页面的特定区域？ IIRC打印完整页面应通过设置菜单在Fiori Client中提供。 –

@Crew是的，我只是想给页面的特定区域打印。 –

在哪个平台上运行您的应用程序？是iOS还是Android？ –

答

关于你的第一个问题，为了获得你的外部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客户端中的打印问题？

相关推荐