如何增加 HTML 应用程序窗口的大小？答案

【问题标题】：How to increase the size of HTML application window?如何增加 HTML 应用程序窗口的大小？
【发布时间】：2017-05-04 13:25:51
【问题描述】：

写信问我将如何使用脚本增加内部 HTML 应用程序窗口的大小。

我目前正在创建一个 Google Sheet 工作表，并且我还在 Google Apps Script 中创建了一个脚本，以便用户可以通过 Google Cloud Print 打印工作表。但是，当我点击打印时，实际的云打印应用程序窗口与外框相比很小（请参见下图以更好地表达我的意思。）

所以盒子本身是 300 x 500，但里面的窗口是它的一半宽度，因此切断了大部分窗口。我只是想知道是否有任何方法可以使内部窗口更大或匹配外部应用程序框的大小？下面是我使用的全部代码。

function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu('Click to print')
      .addItem('Print from Google Cloud', 'openDialog')
      .addToUi();
}

function openDialog() {

  var html = HtmlService.createHtmlOutputFromFile('Index')
    .setWidth(300)
    .setHeight(500)
    .setSandboxMode(HtmlService.SandboxMode.NATIVE);
    SpreadsheetApp.getUi()
    .showModalDialog(html, 'Click the button below, select a printer then adjust your settings and then click Print.');


}

和 index.html 代码：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://www.google.com/cloudprint/client/cpgadget.js">
</script>
<script>
  window.onload = function() {
    var gadget = new cloudprint.Gadget();
    gadget.setPrintButton(
    cloudprint.Gadget.createDefaultPrintButton("button"));
    var liabilityWaiver = waiver.getAs(MimeType.PDF);
    gadget.setPrintDocument("url", "Test Page", "https://drive.google.com/open?id=0B3NraNAa2RhWSldiNklPVGI5OU0");
  }
</script>
  </head>
  <body>
    <div id="button"></div>
  </body>
</html>

【问题讨论】：

标签： html google-apps-script google-sheets google-sheets-api

【解决方案1】：

我相信您看到的是显示的框太大 - 看看如果您将框大小调整到下面，它会更合适。

function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu('Click to print')
      .addItem('Print from Google Cloud', 'openDialog')
      .addToUi();
}

function openDialog() {

  var html = HtmlService.createHtmlOutputFromFile('Index')
    .setWidth(670)
    .setHeight(500)
    .setSandboxMode(HtmlService.SandboxMode.NATIVE);
    SpreadsheetApp.getUi()
    .showModalDialog(html, 'Click the button below, select a printer then adjust your settings and then click Print.');


}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
<script src="https://www.google.com/cloudprint/client/cpgadget.js">
</script>
<script>
  window.onload = function() {
    var gadget = new cloudprint.Gadget();
    gadget.setPrintButton(
        cloudprint.Gadget.createDefaultPrintButton("print_button_container")); // div id to contain the button
    gadget.setPrintDocument("url", "Test Page", "https://www.google.com/landing/cloudprint/testpage.pdf");
    gadget.openPrintDialog();
  }
</script>
  </head>
  <body>
    <div id="button"></div>
  </body>
</html>

用于打印谷歌电子表格的索引

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
<script src="https://www.google.com/cloudprint/client/cpgadget.js">
</script>
<script>
  window.onload = function() {
    var gadget = new cloudprint.Gadget();
    gadget.setPrintButton(
        cloudprint.Gadget.createDefaultPrintButton("print_button_container")); // div id to contain the button
    gadget.setPrintDocument("google.spreadsheet", "Test Page", "SPREADSHEET-ID-GOES-HERE");
    gadget.openPrintDialog();
  }
</script>
  </head>
  <body>
    <div id="button"></div>
  </body>
</html>

【讨论】：

哦，是的，我明白了。非常感谢，如此简单，但我非常感谢！
可能需要问另一个问题，但我会在这里问只是为了节省我的垃圾邮件问题。现在我可以看到所有的窗口，当我点击打印按钮时没有任何反应？跟编码有关系吗？（可能是因为我真的不精通 Google Apps 脚本或 HTML。）
对不起，我应该更具体一些，为获取打印机选择窗口而创建的按钮工作正常。这是实际的最终“打印”按钮，在选择无法工作的打印机并且想知道它是否归结为代码或不相关的东西之后？再次抱歉，没有更具体。
太棒了，非常感谢。又得动脑筋了。如果我想在 Google 表格中而不是从 URL 中打印活动的工作表，我该怎么做？
非常感谢您提供的所有帮助，现在全部整理完毕！当谈到 Google 表格时，请将自己视为我最好的朋友！