Как распечатать форму в appmaker? - PullRequest
Новая
       14

Как распечатать форму в appmaker?

1 голос
/ 27 мая 2019

У меня есть страница, которая содержит форму.Я хочу, чтобы эта форма была напечатана при нажатии на кнопку.

По этой ссылке ( Страница для печати ) Я получил приведенный ниже код, но он не работает должным образом. 

       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-код.

1 Ответ

2 голосов
/ 27 мая 2019

Я не могу точно сказать, почему это произошло, и у меня не так много времени, чтобы расследовать это сейчас;Тем не менее, я предположил, что если вместо записи в документ я просто заменил значения 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, и, таким образом, вы не захотите печатать что-то подобное.Чтобы улучшить это, вы можете вставить материализовать CSS через CDN следующим образом: 

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 с соответствующими метками и значениями.Надеюсь, это поможет!

...