How to print a form in appmaker?

问题

I have a page which contains a form. I want that form to be printed when I click on a button.

From this link(Print Friendly Page) I got the below code but its not working as expected.

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

Calling function

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

Expected Result - Print page should appear with the form rendered.

Actual Result - Print page appears with form not rendered, only html code appears.

回答1:

I can't really tell why that happend and I have not much time to investigate right now; Nevertheless, I assumed that if instead of writing to the document I just replaced the innerHTML values of what currently exists when the window is created, it should work, and it did for me:

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

The only thing about the approach above is that it lacks style, since the form will be rendered without any css and thus you might not want to print something like that. To improve that, you can insert the materialize css via CDN like this:

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

That should render a more decent form for you to print out. Furthermore, that will not print out the values of the form fields and that is because of App Maker bindings. In order to get the field values to print, you'll have to programmatically build the html elements. So you need to do something like this:

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

That should render the html input fields with the respective labels and values. I hope this helps!

来源：https://stackoverflow.com/questions/56321389/how-to-print-a-form-in-appmaker

标签

javascript

google-app-maker