在 Google Apps Script Web App 中使用 Google Visualization API 显示 GSheet 范围时出错答案

【问题标题】：Error showing GSheet range using Google Visualization API in Google Apps Script Web App在 Google Apps Script Web App 中使用 Google Visualization API 显示 GSheet 范围时出错
【发布时间】：2015-10-07 15:45:06
【问题描述】：

我正在尝试通过 Google Apps Script Web App 使用 Google Table Visualization API 显示 Google 电子表格范围。我计划将 Web 应用程序部署到 Google 站点中。当我将代码复制到 Google Apps Script Web App Project 并部署 Web 应用程序时，查询响应为“Bad Request [400]”。如何进一步调试？

替代解决方案：

手动操作：Google 协作平台有一个小工具可以将 Gspreadsheet 范围拉到网页上，但我想以编程方式为 70 个不同的范围和页面执行此操作。
纯 Google Apps 脚本：我可以通过编程方式创建包含表格小工具的网页模板的副本并编辑表格范围。有一个已知问题会在您编辑 HTML 内容时破坏小工具 (google-apps-script-issues #572)。

来源 Google 电子表格（虚假公开数据） https://docs.google.com/spreadsheets/d/1miOxJ3jPCLE66mWcZmd2q-1YAu6so-GbxjcmIDtXUV4

JS Fiddle 代码有效。我可以查询 Google 电子表格并绘制 Google 可视化表。 https://jsfiddle.net/xcghpgmt/6/

也可用作 sn-p。

function drawChart() {
    var key = '1miOxJ3jPCLE66mWcZmd2q-1YAu6so-GbxjcmIDtXUV4';
    var GID = 0;
    var range = 'A3:h18';
    var queryString = 'https://docs.google.com/spreadsheets/d/'+key+'/gviz/tq?gid='+GID+'&range='+range;
   
    // Set Data Source
    var query = new google.visualization.Query(queryString);

    // Send the query with callback function
    query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
    // Handle Query errors
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }

    // Draw Chart
    var data = response.getDataTable();
    var chart = new google.visualization.Table(document.getElementById('chart_div'));
    chart.draw(data);
}
google.load('visualization', '1', {packages:['table'], callback: drawChart});

<script type="text/javascript"  src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

代码.gs

function doGet() {
  var html = HtmlService.createTemplateFromFile("Index").evaluate();
  html.setTitle("Dynamic Webpage");
  return html; 
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .getContent();
}

Index.html

<!DOCTYPE html>
<html>
<header>
</header>
<body>
 <div id="chart_div"></div>
</body>

<?!= include('JavaScript.html'); ?>

</html>

Javascript.html

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    function drawChart() {
    var key = '1miOxJ3jPCLE66mWcZmd2q-1YAu6so-GbxjcmIDtXUV4';
    var GID = 0;
    var range = 'A3:h18';
    var queryString = 'https://docs.google.com/spreadsheets/d/'+key+'/gviz/tq?gid='+GID+'&range='+range;

    // Set Data Source
    var query = new google.visualization.Query(queryString);

    // Send the query with callback function
    query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
    // Handle Query errors
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }

    // Draw Chart
    var data = response.getDataTable();
    var chart = new google.visualization.Table(document.getElementById('chart_div'));
    chart.draw(data);
}
google.load('visualization', '1', {packages:['table'], callback: drawChart});
</script>

【问题讨论】：

标签： javascript google-apps-script google-visualization google-sites

【解决方案1】：

您没有为您的应用程序正确设置沙盒，因此 caja 清理正在剥离 jsapi。

变化：

function doGet() {
  var html = HtmlService.createTemplateFromFile("Index").evaluate();
  html.setTitle("Dynamic Webpage");
  return html; 
}

收件人：

function doGet() {
  var html = HtmlService.createTemplateFromFile("Index").evaluate();
  html.setTitle("Dynamic Webpage").setSandboxMode(HtmlService.SandboxMode.IFRAME);
  return html; 
}

您可以从 include() 函数中完全删除沙盒语句，因为它是您需要沙盒的应用程序。最好删除 include() 并在 Index.html 中使用它：

<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>

【讨论】：