Question

我有一个包含表单的页面。我希望在单击按钮时打印该表格。

通过此链接（Print Friendly Page），我获得了以下代码，但未按预期工作。

       function print(widget, title){
         var content=widget.getElement().innerHTML;
         var win = window.open('', 'printWindow', 'height=600,width=800');
         win.document.write('<head><title>'+title+'/title></head>');
         win.document.write('<body>'+content+'</body>');
         win.document.close(); 
         win.focus(); 
         win.print();
         win.close();
       }

通话功能

        print(app.currentPage.descendants.Form1,'User Details');

预期结果-打印页面应显示表格。

实际结果-显示打印页面时未呈现表单，仅显示html代码。

Answer 1

我真的不能说出为什么会发生，而且我现在没有太多时间进行调查；但是，我假设如果不写文档而是直接替换创建窗口时当前存在的innerHTML值，它应该可以工作，并且对我有用：

function print(widget, title){
  var win = window.open('', 'printWindow', 'height=600,width=800');
  win.document.children[0].children[0].innerHTML = "<title>"+title+"</title>";
  win.document.children[0].children[1].innerHTML = "<body>"+widget.getElement().innerHTML+"</body>";
  win.print();
  win.close();
}

关于上述方法的唯一一件事是它缺乏样式，因为将在不使用任何CSS的情况下呈现表单，因此您可能不想打印类似的内容。为了改善这一点，您可以像这样通过CDN插入实现的CSS：

function print(widget, title){
  var win = window.open('', 'printWindow', 'height=600,width=800');
  var css = document.createElement("link");
  css.setAttribute("href", "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css");
  css.setAttribute("rel","stylesheet");
  win.document.children[0].appendChild(css);
  win.document.children[0].children[0].innerHTML = "<title>"+title+"</title>";
  win.document.children[0].children[1].innerHTML = "<body>"+widget.getElement().innerHTML+"</body>";
  setTimeout(function(){
    win.print();
    win.close();
  },500);
}

那应该呈现出更体面的表格供您打印。此外，这将不会打印出表单字段的值，这是由于App Maker绑定所致。为了获取要打印的字段值，您必须以编程方式构建html元素。因此，您需要执行以下操作：

function print(widget, title){
  var htmlContent = "";
  var fields = widget.children.{formNameBody}.descendants._values;
  fields.forEach(function(field){
    var label = field.getElement().getElementsByTagName("label")[0];
    htmlContent += label.outerHTML;    
    var input = field.getElement().getElementsByTagName("input")[0];
    var fieldVal = field.value;  
    input.setAttribute("value", fieldVal);
    htmlContent += input.outerHTML;
  });
  var win = window.open('', 'printWindow', 'height=600,width=800');
  var css= document.createElement("link");
  css.setAttribute("href", "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css");
  css.setAttribute("rel","stylesheet");
  win.document.children[0].appendChild(css);
  win.document.children[0].children[0].innerHTML = "<title>"+title+"</title>";
  win.document.children[0].children[1].innerHTML = "<body>"+htmlContent+"</body>";
  setTimeout(function(){
    win.print();
    win.close();
  },500);
}

这应该呈现带有相应标签和值的html输入字段。我希望这会有所帮助！

如何在Appmaker中打印表格？

1 个答案: