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

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

本文关键字：Google 显示 API GSheet 出错 可视化 范围 Script Apps Web App      更新时间：2023-09-26

我试图通过谷歌应用程序脚本Web应用程序使用谷歌表可视化API显示谷歌电子表格范围。我计划将Web应用程序部署到谷歌网站。当我将代码复制到Google Apps Script Web应用程序项目并部署Web应用程序时，查询响应是"错误请求[400]"。如何进一步调试?

替代解决方案:

  • 手动:谷歌网站有一个小工具拉一个Gspreadsheet范围到一个网页，但我想做的70个不同的范围和页面编程。
  • 纯谷歌应用程序脚本:我可以以编程方式创建一个网页模板的副本，其中包含表gadget和编辑表范围。当你编辑HTML内容时，有一个已知的问题会破坏gadget (google-apps-script-issues #572)。

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

JS小提琴代码工作。我可以查询谷歌电子表格并绘制谷歌可视化表。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>

您还没有正确设置应用程序的沙箱，因此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(); ?>
相关文章：