반응형
여태까지 webapp 은 get방식으로 파라미터를 넘겨왔다.
하지만 Google Sites에 배포를 하게되면 get방식으로 파라미터를 넘길 수 없다.
아무리 실행해도 응답이 없다.
이런 경우에는, get방식으로 파라미터를 넘기는 것이 아니라
google.script.run 을 이용해 html에서 GAS의 function을 실행해야 한다.
google.script.run 클래스 (클라이언트 측 API) | Apps Script | Google for Developers
이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 google.script.run 클래스 (클라이언트 측 API) 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고
developers.google.com
실행할 때 withSuccessHandler를 이용해 성공에 대한 콜백함수를 지정한다.
function go() {
var input_url = document.getElementById("input_url").value;
console.log(`input url : ${input_url}`);
google.script.run.withSuccessHandler(onSuccess)
.readTextFromFile(input_url);
}
function onSuccess(result) {
console.log(`result : ${result}`);
var input_value = document.getElementById("result");
input_value.innerHTML = `<h2><sapn>${result}</sapn></h2>`;
}
GAS의 readTextFromFile 함수를 잘 실행한 것을 볼 수 있고,
콜백으로 결과 값이 콘솔에도 찍히는것을 확인 할 수 있다.
Code.gs
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('inputUrl.html');
return htmlOutput.evaluate();
}
function readTextFromFile(url) {
if ( !url ) {
return;
}
const contentBlob = UrlFetchApp.fetch(url).getBlob();
const resource = {
title : contentBlob.getName(),
mimeType : contentBlob.getContentType()
}
const options = {
ocr : true
}
const docFile = Drive.Files.insert(resource, contentBlob, options);
const doc = DocumentApp.openById(docFile.id);
const text = doc.getBody().getText();
Drive.Files.remove(docFile.id);
return text;
}
inputUrl.html
function go() {
var input_url = document.getElementById("input_url").value;
google.script.run.withSuccessHandler(onSuccess)
.readTextFromFile(input_url);
}
function onSuccess(result) {
var input_value = document.getElementById("result");
input_value.innerHTML = `<h2><sapn>${result}</sapn></h2>`;
}
URL to OCR
입력한 URL 의 PDF, Image에 대한 결과를 OCR로 보여줌
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script type="text/javascript">
function go() {
var input_url = document.getElementById("input_url").value;
google.script.run.withSuccessHandler(onSuccess)
.readTextFromFile(input_url);
}
function onSuccess(result) {
var input_value = document.getElementById("result");
input_value.innerHTML = `<h2><sapn>${result}</sapn></h2>`;
}
</script>
</head>
<body>
<div class="container">
<div class="row frame">
<h5 class="mt-4 text-center">URL to OCR</h5>
<h6 class="mb-4 text-center">입력한 URL 의 PDF, Image에 대한 결과를 OCR로 보여줌</h6>
<div class="form-group mb-4 box">
<input type="text" class="form-control inp mb-3" id="input_url" name="input_url" placeholder="입력" autocomplete="off" value="https://i.stack.imgur.com/i1Abv.png" />
</div>
<div id="result" />
</div>
</div>
<div class="form-group mt-4 mb-4 text-center">
<input type="button" class="btn btn-info" id="send" name="send" value="실행" onclick="go()" /><br>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
</body>
</html>
구글 사이트의 우측탭에서 [페이지] 로 이동한다.
[전체 페이지 삽입] 을 눌러 페이지를 입력한다.
[삽입 추가] 를 눌러 새로 배포 url을 입력한다.
Google Sits에서 정상적으로 실행되는것을 확인 할 수 있다.
Whistory - OCR
페이지 업데이트 시간:
sites.google.com
반응형
'GCP > Apps Script' 카테고리의 다른 글
| Apps Script로 Google Sheets에서 전화번호 양식 변환하기 (0) | 2023.08.21 |
|---|---|
| Apps Script로 Google Sheets의 a1notaion을 getRange에서 사용되는 row, column, numRows, numColumns 범위로 변경 (0) | 2023.06.22 |
| Apps Script로 장 종료 후 특정 주식의 종가 정보 카카오톡으로 전송하기 (0) | 2023.06.12 |
| Apps Script로 Google Forms의 Dropdown 항목을 Google Sheets에서 가져온 데이터로 생성하기 (0) | 2023.06.09 |
| Apps Script로 입력한 검색어를 위키피디아에서 가져와 보여주기 (0) | 2023.06.08 |