【GAS→html값 전달】①스프레드시트→html에 값 전달(로드, 템플리 로드시)
전제·대상 레벨이라든지, 그 외 기사를 정리하고 있습니다.
다음 페이지
②스프레드시트→html에 건네준 값을 테이블 형식으로(jquery)
할 일
GAS로 만든 웹 페이지를 열 때,
コード.gs )로 값 취득 index.html)로 값 전달 스프레드시트
A
B
C
1
지역
도도부현
현청 소재지
2
수도권
도쿄
도쿄
3
도카이
아이치
나고야
4
도호쿠
미야기
센다이
5
간사이
효고현
고베
6
고신에쓰
야마나시
고후
결과
웹페이지↓
실제 코드
GAS 코드(스푸시→GAS로 값 취득, 유지)
코드.gs
function valsget() {
//GASに紐づくスプシ呼び出し→シート名からシート取得 ※シート名相違注意
let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("テスト");
//範囲を取得→getvaluesで値取得、二次元配列に格納
let vals = ss.getDataRange().getValues();
Logger.log(vals);
//[['地域','都道府県','県庁所在地'],['首都圏','東京','東京'],['東海','愛知','名古屋'],〜〜]をログで出力
return vals;
}
GAS 코드(html 템플릿 생성, 출력)
코드.gs
//doGet関数を使う
function doGet(){
let htmloutput = HtmlService.createTemplateFromFile('index').evaluate();
//htmlテンプレートを作って再評価。再評価でjsの関数などを読み込み実行
htmloutput.setTitle('CRUDテスト');
return htmloutput;
//htmlテンプレート返す
}
【해설】GAS 함수(서버)를 javascript(클라이언트)로 호출하는 메소드
google.script.run.withSuccessHandler(コールバック関数＝クライアント側js).GAS関数();
/*
1.GAS関数をまず実行
2.GASで取得した戻り値 → コールバック関数に戻り値を渡す
3.コールバック関数=クライアント側jsを実行する
*/
index.html 만들기 → html, 클라이언트 측 자바 스크립트
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p id="test"></p>
</body>
</html>
<script>
//webページの読み込み時に実行
window.onload = function(){
google.script.run.withSuccessHandler(function(dt){ //valsgetの取得値をdtに渡す
let testEl = document.getElementById('test'); //要素p取得
testEl.innerHTML = dt; //要素pのテキストにdtを入れる
}).valsget();
}
</script>
Reference
이 문제에 관하여(【GAS→html값 전달】①스프레드시트→html에 값 전달(로드, 템플리 로드시)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/forever---beginner/items/8e6f1e9c019070d43954텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
