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

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

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

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

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>

最佳答案

我相信您看到的是显示的框太大 - 看看如果您将框尺寸调整到下面,它会更好。

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>

indox 打印 Google 电子表格

<!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>

关于html - 如何增加 HTML 应用程序窗口的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43784186/

相关文章:

html - 导航栏下方的搜索栏

google-apps-script - 如何在创建时设置工作表的行数和列数? (还有关于Google的 “advanced parameters”的字词)

google-apps-script - 谷歌脚本 openById : You do not have permission to perform that action

javascript - Google Docs 电子表格到 JSON

javascript - 带搜索框的 D3 图表

php - 您的SQL语法有误;检查与您的MariaDB服务器版本相对应的手册以获取正确的语法。

html - 为什么我的 css 文件导入不起作用?

javascript - Google Apps 脚本未检测到当前行

google-apps-script - 当事件电子表格更改时调用事件

arrays - 为什么列中最后一个非空单元格的这个 Google 表格公式有效?