我有一个Web应用程序,该应用程序具有将数据发送到Google Spreadsheet的表单。现在,我想创建另一个具有搜索功能的html页面,以从Google表格中提取数据并将其显示在我的html页面上。有没有办法做到这一点?请帮忙。我到处都看过,但是没有代码有帮助。预先感谢。
您是要在外部(即在Google环境之外的自己的网站/服务器上)构建和托管此页面,还是要构建在G Suite中进行编码,管理和托管的网页?
如果是前者,则需要使用Google Sheets API才能从电子表格中提取数据。
如果是后者,请阅读Apps脚本的Web Apps和HTML Service,使您可以在G Suite中构建和托管基本的Web应用程序。
如果您需要更多示例来工作,请在您喜欢的搜索引擎中尝试搜索字词“托管网络应用google应用脚本”。
一个搜索对话框和Web应用程序
Code.gs:
function findNeedleInHaystack(sObj) {
var sObj=sObj||{};
sObj.column=sObj.column||1;
sObj.needle=sObj.needle||22;
sObj.haystack=sObj.haystack||'Sheet1';
sObj.startrow=sObj.startrow||2;
sObj.id=sObj.id||'Spreadsheet ID';
sObj.found="No results found";
var ss=SpreadsheetApp.openById(sObj.id);
var sh=ss.getSheetByName(sObj.haystack);
var rg=sh.getRange(sObj.startrow,1,sh.getLastRow()-sObj.startrow+1,sh.getLastColumn());
var v=rg.getValues();
for(var i=0;i<v.length;i++) {
if(v[i][sObj.column-1]==sObj.needle) {
sObj.found=v[i];
break;
}
}
return sObj;
}
function needleInHaystackDialog() {
var userInterface=HtmlService.createHtmlOutputFromFile("aq6").setWidth(800);
SpreadsheetApp.getUi().showModelessDialog(userInterface, "Needle In Haystack")
}
function doGet() {
return HtmlService.createHtmlOutputFromFile("aq6").setWidth(600);
}
aq5.html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<br /><input id="txt1" type="text" placeholder="Sheet Name" />
<br /><input id="txt2" type="text" placeholder="Search String" />
<br /><input id="txt3" type="text" placeholder="Search Column Number" />
<br /><input id="txt4" type="text" placeholder="Start Row" />
<br /><input id="txt5" type="text" placeholder="Spreadsheet ID" />
<br /><textarea id="found" rows="2" cols="50"></textarea>,
<br /><input type="button" value="Search" onClick="search();" />
<script>
function search() {
var s1=$('#txt1').val();
var s2=$('#txt2').val();
var s3=$('#txt3').val();
var s4=$('#txt4').val();
var s5=$('#txt5').val();
google.script.run
.withSuccessHandler(function(sObj){
$('#found').val(sObj.found);
})
.findNeedleInHaystack({haystack:s1,needle:s2,column:s3,startrow:s4,id:s5});
}
</script>
</body>
</html>
我测试了对话框版本。它是第一次工作。您可以测试和调试doGet()。