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

Question

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

替代解决方案：

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

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

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

也可以作为片段使用。

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>

Code.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>

Answer 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(); ?>

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

Error showing GSheet range using Google Visualization API in Google Apps Script Web App

javascript

google-visualization

google-sites

google-apps-script