Apps Script用Sheet生成動態網頁(3):提供javascript與json檔案

-

一個現代網站的構成不是只有HTML網頁本身，還會包含JavaScript以及設定檔json等等資料。上週提到怎麼將Sheet的資料直接輸出成AppsScript的網頁，這篇則要針對javascript檔和json檔，也要能用AppsScript產生出來。

以 app.js 舉例

  1. 在線上編輯器新建html檔案
  2. 將該html檔案名稱命名為app.js 它後面會帶.html變成app.js.html
  3. 然後將下面script套用到你的AppsScript的code中


function getContentOfFile(name, mimetype) {
const map = {
[ContentService.MimeType.JAVASCRIPT]: { subName: '.js', alias: 'JS檔' },
[ContentService.MimeType.JSON]: { subName: '.json', alias: 'Json檔' },
[ContentService.MimeType.TEXT]: { subName: '.txt', alias: '文字檔' },
[ContentService.MimeType.XML]: { subName: '.xml', alias: 'XML檔' },
};
let fileName = name + map[mimetype].subName;
let content;
try {
content = HtmlService.createHtmlOutputFromFile(fileName).getContent();
} catch (error) {
console.error(`找不到${map[mimetype].alias}:${name}`);
content = map[mimetype].default;
}
return ContentService.createTextOutput(content).setMimeType(mimetype);
}

function doGet(req) {
if (req.parameter['getJavascript']) {
return getContentOfFile(req.parameter['getJavascript'], ContentService.MimeType.JAVASCRIPT);
}
else if (req.parameter['getJson']) {
return getContentOfFile(req.parameter['getJson'], ContentService.MimeType.JSON);
}
else if (req.parameter['getText']) {
return getContentOfFile(req.parameter['getText'], ContentService.MimeType.TEXT);
}
else if (req.parameter['getXml']) {
return getContentOfFile(req.parameter['getXml'], ContentService.MimeType.XML);
}
....
}


  1. 在你要使用app.js的網頁上加入連結
如果你的script網址是 https://script.google.com/macros/s/AKfxvA/exec，加入
<script src="https://script.google.com/macros/s/AKfxvA/exec?getJavascript=app"></script>
  • app.js 使用 {你的Script網址}?getJavascript=app   
  • app.json 使用 {你的Script網址}?getJson=app
  • app.txt 使用 {你的Script網址}?getText=app
  • app.xml使用 {你的Script網址}?getXml=app 

如果是想要動態產生加入
<script src="<?= getServerUrl() + '?getJavascript=app' ?>"></script>

在code內加入
function getServerUrl() {
return ScriptApp.getService().getUrl();
}


留言

張貼留言