打印友好页面

时间:2017-01-30 20:31:50

标签: google-app-maker

所以我希望能够为我们数据库中的条目设置一个打印按钮,以便用户可以通过打印友好的“表单”打印条目。

我的想法是创建一个单独的页面,添加标签并让这些标签提取相关信息。

我知道我可以通过以下代码添加打开的小部件信息:

app.datasources.ModelName.selectKey(widget.datasource.item._key);
app.showPage(app.pages.TestPrint);

但我遇到了一些问题:

  1. 我无法在新窗口中打开该页面。这可能吗?

    window.open(app.pages.TestPrint);

  2. 给我一​​个空白页面。新窗口打开后,浏览器是否会丢失窗口小部件源?

    1. 我无法获得打印选项(onClick或onDataLoad)来打印图像(或小部件)。我跑

      window.print();

    2. 它包括标题+滚动条。我需要运行客户端脚本吗?

      任何帮助将不胜感激。谢谢!

4 个答案:

答案 0 :(得分:4)

为了得到你想要的东西,你必须做很多工作。

以下是我建议的更简单的答案:

不要打开新标签页。如果您像上面提到的那样使用showPage,并在页面上提供“返回”按钮以返回到您所在的位置,您将获得所需的一切。如果您不希望在打印时显示背面,则可以在打印之前在按钮上设置可见性(false),然后打印,然后设置setVisibility(true)。

我将快速总结一下如何使用新标签执行此操作,但它非常复杂,所以如果不自己尝试,我就无法详细介绍。基本的想法是,您希望打开包含完整URL的页面,就像用户导航到它一样。

您可以使用#TestPrint指示要加载的页面。您还需要应用程序的URL,据我所知,它只能在使用Apps Script方法的服务器端脚本中使用:ScriptApp.getService()。getUrl()。除此之外,您可能需要传入密钥,以便您的页面知道要加载的数据。

因此,您需要通过调用服务器脚本来组装URL,然后将key属性附加到它。最后你需要一个类似的网址:

https://www.script.google.com/yourappaddress#TestPage?key=keyOfYourModel

然后在TestPage上,您需要读取密钥,并加载该密钥的数据。 (您可以使用google.script.url)阅读密钥。

或者,我认为通过打开一个空白窗口然后直接写入其DOM可以玩一些技巧,但我从未尝试过,因为Apps脚本在iframe中运行我不确定它是否是可能。如果我有机会,我会玩它并更新这个答案,但为了您自己的参考,您可以在这里查看:create html page and print to new tab in javascript

我正在想象这样的东西,除了你的页面写了它的html内容。类似的东西:

var winPrint = window.open('', '_blank', 'left=0,top=0,width=800,height=600,toolbar=0,scrollbars=0,status=0');
winPrint.document.write(app.pages.TestPage.getElement().innerHTML);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();

希望这三个选项中的一个有帮助:)

答案 1 :(得分:2)

所以这就是我最终要做的事情。它不优雅,但它的工作原理。

我在用户编辑数据库条目时弹出的页面片段中添加了一个“打印”按钮。

数据库编辑按钮代码:

app.datasources.ModelName.selectKey(widget.datasource.item._key);
app.showDialog(app.pageFragments.FragmentName);

该打印按钮转到另一个(完整)页面并关闭片段。

打印按钮代码:

app.datasources.ModelName.selectKey(widget.datasource.item._key);
app.showPage(app.pages.ModelName_Print);
app.closeDialog();

我确保新的打印页面足够小,以便Chrome适当地适合8.5 x 11“页面(728x975)。

然后我创建了一个面板,用于填充页面并使用标签填充页面

@datasource.item.FieldName

然后我将以下内容放入面板的onDataLoad

window.print();

现在,当用户按下片段中的“打印”按钮时,它们将被带到此新页面,并在数据加载后自动获得打印对话框。

唯一的缺点是打印后用户必须使用我添加的后退按钮返回数据库页面。

答案 2 :(得分:0)

1

据我所知,你不能将window.open与app.pages。*结合使用,因为

window.open至少需要url参数,而app.pages。*本质上是App Maker提供的内部路由机制,它返回页面对象,适合在页面之间切换或打开对话框。

2

您可能需要首先设置页面样式,因此它包含您想要打印的内容。为此,请使用@media print

例如:我们在页面上有一个按钮,并希望将其从打印页面隐藏

{{1}}

希望它有所帮助。

答案 3 :(得分:0)

1。以下是如何在弹出窗口中完成,而不会弄乱当前页面(客户端脚本):

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

按钮的onclick处理程序是:

print(widget.root.descendants.PageFragment1, 'test');

在此示例中,PageFragment1是当前页面上的页面片段,通过添加名称为hidden且定义为.hidden{display:none;}的样式来隐藏(这与App Maker似乎删除了来自DOM的项目)。完美运作......

2。您无法在其他标签页中打开应用中的网页。原则上这样的事情会这样做:

var w=window.parent.parent;
w.open(w.location.protocol+'//'+w.location.host+w.location.pathname+'#PrintPage', '_blank');

但是,由于应用程序在启动页面的两个深度嵌套的框架中运行,并且具有不同的来源,您将无法访问所需的URL(上述代码导致跨源框架访问错误) 。因此,您必须对URL进行硬编码,这在部署时会发生变化,因此会非常快速地变得难看。不管你想要什么,应用程序的加载时间应该阻止你想要这样做。