打印友好页面 [英] Print Friendly Page
问题描述
因此，我希望能够为我们数据库中的条目提供一个打印按钮，以便用户可以通过易于打印的表格"来打印条目.
So I would like to be able to have a print button for entries in our database so users can print an entry via a print friendly "form".
我的想法是创建一个单独的页面，添加标签，并让这些标签提取相关信息.
My thought was to create a separate page, add labels and have those labels pull the relevant information.
我知道我可以通过以下代码添加打开的小部件信息:
I know I can add the open widget information via this code:
app.datasources.ModelName.selectKey(widget.datasource.item._key);
app.showPage(app.pages.TestPrint);
但是我遇到了一些问题:
But I'm running into a few problems:
-
我无法在新窗口中打开页面.这可能吗?
I can't get the page to open in a new window. Is this possible?
window.open(app.pages.TestPrint);
window.open(app.pages.TestPrint);
请给我一个空白页.新窗口打开后，浏览器会丢失小部件源吗?
Just gives me a blank page. Does the browser lose the widget source once the new window opens?
-
我无法获得打印选项(onClick或onDataLoad)来仅打印图像(或小部件).我跑
I can't get the print option (either onClick or onDataLoad) to print JUST the image (or widget). I run
window.print();
window.print();
它包括标题和滚动条.我是否需要运行客户端脚本?
And it includes headers + scroll bars. Do I need to be running a client side script instead?
任何帮助将不胜感激.谢谢！
Any help would be appreciated. Thank you!
推荐答案
要准确地获得所需的内容，您将需要做很多工作.
To get exactly what you'd want you'd have to do a lot of work.
这是我建议的，更简单的答案:
Here is my suggested, simpler answer:
请勿打开新标签页.如果您像提到的那样使用showPage，并提供返回"按钮返回到原来的位置，您将获得所需的几乎所有东西.如果您不想在打印时显示背面，则可以在打印之前在按钮上设置setVisibility(false)，然后打印，然后再设置setVisibility(true).
Don't open up a new tab. If you use showPage like you mention, and provide a "back" button on the page to go back to where you were, you'll get pretty much everything you need. If you don't want the back to show up when you print, then you can setVisibility(false) on the button before you print, then print, then setVisibility(true).
我将通过一个新的选项卡快速概述如何执行此操作，但是它涉及到很多内容，因此如果不自己尝试，我无法详细介绍它.基本思想是，您要使用完整的URL打开页面，就像用户导航到该页面一样.
I'll give a quick summary of how you could do this with a new tab, but it's pretty involved so I can't go into details without trying it myself. The basic idea, is you want to open the page with a full URL, just like a user was navigating to it.
您可以使用#TestPrint指示要加载的页面.您还需要应用程序的URL，据我所记得，该URL仅在使用Apps Script方法的服务器端脚本中可用:ScriptApp.getService().getUrl().最重要的是，您可能需要传递密钥，以便您的页面知道要加载哪些数据.
You can use #TestPrint to indicate which page you want to load. You also need the URL of your application, which as far as I can remember is only available in a server-side script using the Apps Script method: ScriptApp.getService().getUrl(). On top of this, you'll probably need to pass in the key so that your page knows what data to load.
因此，鉴于此，您需要通过调用服务器脚本来组装URL，然后将key属性附加到该URL.最后，您想要一个类似以下内容的网址:
So given this, you need to assemble a url by calling a server script, then appending the key property to it. In the end you want a url something like:
https://www.script.google.com/yourappaddress#TestPage ?key = keyOfYourModel .
然后，您需要在TestPage上读取密钥，并加载该密钥的数据. (您可以使用 google.script.url 阅读密钥. ).
Then on TestPage you need to read the key, and load data for that key. (You can read the key using google.script.url).
或者，我认为您可以通过打开空白窗口然后直接写入其DOM来发挥一些技巧，但是我从未尝试过，并且因为Apps Script在iframe中运行，所以我不确定是否可能的.如果有机会，我将使用它并更新此答案，但您可以参考以下内容:
Alternatively, I think there are some tricks you can play by opening a blank window and then writing directly to its DOM, but I've never tried that, and since Apps Script runs inside an iframe I'm not sure if it's possible. If I get a chance I'll play with it and update this answer, but for your own reference you could look here: create html page and print to new tab in javascript
我正在想象类似的事情，除了您的页面写的是html内容.像这样:
I'm imagining something like that, except that your page an write it's html content. Something like:
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();
希望这三个选项之一可以帮助您:)
Hope one of those three options helps :)
这篇关于打印友好页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
