如何增加HTML应用程序窗口的大小?

时间:2017-05-04 13:25:52

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

写一下要求如何使用脚本增加内部HTML应用程序窗口的大小。

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

enter image description here

所以盒子本身是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>

1 个答案:

答案 0 :(得分:3)

我相信你所看到的是显示的盒子太大 - 看看如果你将盒子大小调整到下面,它会更合适。

&#13;
&#13;
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.');


}
&#13;
&#13;
&#13;

&#13;
&#13;
<!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>
&#13;
&#13;
&#13;

indox打印谷歌电子表格

&#13;
&#13;
<!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>
&#13;
&#13;
&#13;