javascript 在google脚本中传递变量到Html文件

abithluo 于 2022-12-02 发布在 Java

关注(0)|答案(1)|浏览(112)

I am trying to create an input tag for an HtmlTemplate function for each file in a folder on my google Drive.
This input tag works, but I'm trying to use variables to set the team (BAL) and the src id:

<input type="image" class="teamLogo" onClick="getTeam('BAL');" src="https://drive.google.com/uc?id=12p5P6dmmHTX3PIq0kyUKr2qhWtSkmi3h">

This is the scriptlet in my html file:

<? var logos = getTeamLogos() ?>
<? for (i in logos) { ?>
    <input type="image" class="teamLogo" onClick="getTeam('"+logos[i][0]+"');" src="https://drive.google.com/uc?id="+logos[i][1]+"">
<? } ?>

And this is the getTeamLogos function I am calling:

function getTeamLogos(){
    var getLogos = DriveApp.getFolderById('redacted').getFiles();
    var logos = []
    while (getLogos.hasNext()) { 
        var logo = getLogos.next(); 
        var teamAbbrv = logo.getName(); 
        var logoId = logo.getId(); 
        logos.push([teamAbbrv,logoId]) 
        }
    logos.sort()
    console.log(logos)
    return logos 
}

Here's the console.log from the getTeamLogos function:

[ [ 'ANA', '1A8UJAYuKCter4V0gvd6nYP7z8G_QpWzK' ],   
[ 'BAL', '12p5P6dmmHTX3PIq0kyUKr2qhWtSkmi3h' ],   
[ 'BOS', '1AVMrn7E3fOlgFc_slCFPGQjFG2eauAKF' ],   
[ 'CLE', '1yY76xP_axJfbCmEZoSx2nDlILOaoKIBg' ],   
[ 'CWS', '1ZCPbHLQ_iIB8WSQ_sPYELiSw3p23uzc2' ],   
[ 'DET', '1GMmqhGr1eeCfoRgNMqliHFehwTopLVQE' ],   
[ 'HOU', '1iN-78qrvkT_E7K-CCUZbfdZV_o1vokPk' ],   
[ 'KC', '1vd_0mby6wV9qxSA4lvzBNPFi5bLnFsf3' ],   
[ 'MIN', '1HP5gArugPbXBlsCKrtYs0cPmIcff-Uf0' ],   
[ 'NYY', '1VIAYsnGgIKIG9VIIkcOVib446Wh2Ue1D' ],   
[ 'OAK', '1dYECC_EJwc2_e2WGJ_H5W0hvOAmv3w7V' ],   
[ 'SEA', '1jRotoBam7UFoCxpOxfBncdr6-JEcsnhq' ],   
[ 'TB', '10UlOIjit_K7Vmyna85aAztRuXzULnpb_' ],   
[ 'TEX', '1MgZfakotrGTrOotDVCNpehAKlWo7O4wp' ],   
[ 'TOR', '1RwmaPY8o5oPYs_hJCiEvvVe3NEE9Kuth' ] ]

But I keep getting a malformed HTML content error:
Exception: Malformed HTML content: <input type="image" class="teamLogo" onClick="getTeam('"+logos[i][0]+"');" src="https://drive.google.com/uc?id="+logos[i][1]+""> .
I've tried every combination of single quote, double quote, plus sign, ampersand, can't get the syntax quite right.

JavaScript

来源：https://stackoverflow.com/questions/74650557/passing-variables-to-html-file-in-google-scripts

1条答案

按热度按时间

cwdobuhd1#

我认为在HTML中，需要对scriptlet进行如下修改。

发件人：

<? var logos = getTeamLogos() ?>
<? for (i in logos) { ?>
    <input type="image" class="teamLogo" onClick="getTeam('"+logos[i][0]+"');" src="https://drive.google.com/uc?id="+logos[i][1]+"">
<? } ?>

收件人：

<? var logos = getTeamLogos() ?>
<? for (i in logos) { ?>
    <input type="image" class="teamLogo" onClick="getTeam('<?= logos[i][0] ?>');" src="https://drive.google.com/uc?id=<?= logos[i][1] ?>">
<? } ?>

scriptlet会被HTML模板替换为Google企业应用套件脚本的值。请注意这一点。

注：

作为补充说明，在当前阶段，当循环处理与HTML模板一起使用时，处理成本将变得很高。Ref (Author: me)因此，在您的情况下，我认为可以使用以下修改。
HTML侧

<?!= values ?>

Google企业应用套件脚本端

const html = HtmlService.createTemplateFromFile("index");
  html.values = getTeamLogos().map(([a, b]) => `<input type="image" class="teamLogo" onClick="getTeam('${a}');" src="https://drive.google.com/uc?id=${b}">`).join("");
  const htmlOutput = html.evaluate();
  // You can use htmlOutput to Web Apps, sidebar, dialog, and so on.

参考：

HTML Service: Templated HTML

赞(0）回复(0）举报 2022-12-02

我来回答

javascript 在google脚本中传递变量到Html文件

1条答案

发件人：

收件人：

注：

参考：

相关问题

热门标签

最新问答