如何在Appmaker中打印表格? [英] 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();
}
通话功能
print(app.currentPage.descendants.Form1,'User Details');
预期结果-打印页面应显示表格.
Expected Result - Print page should appear with the form rendered.
实际结果-显示打印页面时未呈现表单，仅显示html代码.
Actual Result - Print page appears with form not rendered, only html code appears.
推荐答案
我无法确切地说出发生这种情况的原因，而且我现在没有太多时间进行调查；不过，我假设如果不写文档而是只替换创建窗口时当前存在的innerHTML值，它应该可以工作，并且对我有用:
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();
}
关于上述方法的唯一一件事是它缺乏样式，因为将在不使用任何CSS的情况下呈现表单，因此您可能不想打印类似的内容.为了改善这一点，您可以像这样通过CDN插入实现的CSS:
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);
}
那应该呈现出更体面的表格供您打印.此外，这将不会打印出表单字段的值，这是由于App Maker绑定所致.为了获取要打印的字段值，您必须以编程方式构建html元素.因此，您需要执行以下操作:
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);
}
这应该呈现带有相应标签和值的html输入字段.我希望这会有所帮助！
That should render the html input fields with the respective labels and values. I hope this helps!
这篇关于如何在Appmaker中打印表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
