검색결과 리스트
전체 글에 해당되는 글 781건
- 2024.11.06 PDF 나누기(split) 2
- 2024.11.01 PDF 파일 합치기(수정) 1
- 2024.10.23 [구글 Apps Script] PDF로 출력하기
- 2024.09.30 구글 Apps Script로 후원신청서 만들기 2
- 2024.09.23 Apps Script를 활용해 스프레드 시트로 데이터 전송하기
글
PDF 나누기(split)
PDF를 두개로 나누는 html입니다.
pdf-lib (MIT 라이선스): https://github.com/Hopding/pdf-lib
pdf.js (Apache 2.0 라이선스): https://github.com/mozilla/pdf.js
위 라이브러리를 사용하였으며, chatGPT 등의 도움을 받아 실습 삼아 만들어 보았습니다.
아래는 html 스크립트 입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>PDF 나누기 (Split)</title>
<!-- pdf-lib 및 pdf.js 라이브러리 로드 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f3f4f6;
margin: 0;
}
.container {
width: 100%;
max-width: 500px;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 24px;
color: #333;
text-align: center;
}
p {
font-size: 14px;
color: #555;
text-align: left;
}
input[type="file"] {
width: 100%;
padding: 10px;
margin: 10px 0;
font-size: 14px;
}
input[type="number"] {
width: 50%;
padding: 10px;
margin: 10px 0;
font-size: 14px;
}
#split-button {
width: 100%;
padding: 12px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
#split-button:hover {
background-color: #218838;
}
footer {
text-align: left;
font-size: 12px;
color: #777;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>PDF 나누기</h1>
<p>PDF를 두 개의 파일로 나눌 수 있습니다.</p>
<p>1. "파일 선택" 버튼을 눌러 나눌 PDF 파일을 선택하세요.</p>
<input type="file" id="file-input" accept="application/pdf" />
<p>2. 나눌 페이지 번호를 입력하세요. <br>
(예: 3을 입력하면 1-3페이지와 4-마지막 페이지로 나뉩니다.)</p>
<input type="number" id="split-page" min="1" />
<p>3. "PDF 나누기" 버튼을 누르세요.</p>
<button id="split-button">PDF 나누기</button>
<footer>
<p><strong>사용된 라이브러리</strong></p>
<ul>
<li>pdf-lib (MIT 라이선스): <a href="https://github.com/Hopding/pdf-lib">https://github.com/Hopding/pdf-lib</a></li>
<li>pdf.js (Apache 2.0 라이선스): <a href="https://github.com/mozilla/pdf.js">https://github.com/mozilla/pdf.js</a></li>
</ul>
</footer>
</div>
<script>
const fileInput = document.getElementById('file-input');
const splitPage = document.getElementById('split-page');
const splitButton = document.getElementById('split-button');
splitButton.addEventListener('click', async () => {
if (!fileInput.files[0]) {
alert('PDF 파일을 선택해주세요.');
return;
}
const pageNumber = parseInt(splitPage.value);
if (isNaN(pageNumber) || pageNumber < 1) {
alert('유효한 페이지 번호를 입력해주세요.');
return;
}
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
const pdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);
if (pageNumber >= pdfDoc.getPageCount()) {
alert('입력한 페이지 번호가 PDF의 총 페이지 수보다 크거나 같습니다.');
return;
}
// 첫 번째 PDF 생성 (1부터 pageNumber까지)
const firstPdf = await PDFLib.PDFDocument.create();
const firstPages = await firstPdf.copyPages(pdfDoc, Array.from({length: pageNumber}, (_, i) => i));
firstPages.forEach(page => firstPdf.addPage(page));
// 두 번째 PDF 생성 (pageNumber+1부터 끝까지)
const secondPdf = await PDFLib.PDFDocument.create();
const secondPages = await secondPdf.copyPages(pdfDoc, Array.from({length: pdfDoc.getPageCount() - pageNumber}, (_, i) => i + pageNumber));
secondPages.forEach(page => secondPdf.addPage(page));
// PDF 저장 및 다운로드
const firstPdfBytes = await firstPdf.save();
const secondPdfBytes = await secondPdf.save();
downloadPdf(firstPdfBytes, 'split_first.pdf');
downloadPdf(secondPdfBytes, 'split_second.pdf');
});
function downloadPdf(pdfBytes, fileName) {
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = fileName;
a.click();
URL.revokeObjectURL(url);
}
</script>
</body>
</html>
'[정보] IT정보&활용' 카테고리의 다른 글
PDF 파일 합치기(수정) (1) | 2024.11.01 |
---|---|
[구글 Apps Script] PDF로 출력하기 (0) | 2024.10.23 |
[구글 스프레드 시트] 서명받기 (0) | 2024.08.27 |
컴퓨터 예약 종료 배치파일(.bat) 만들기 (0) | 2024.06.21 |
yt-dlp를 쉽게... 배치파일(bat) 만들기 (0) | 2024.05.29 |
설정
트랙백
댓글
글
PDF 파일 합치기(수정)
디자인을 가미하기 전 순수 스크립트만 담겨있는 초기 버전입니다.
소스 검토용으로 남겨놓습니다.
위 파일을 자신의 컴퓨터로 다운 받아서 그냥 실행하시면 됩니다.
pdf-lib (MIT 라이선스): https://github.com/Hopding/pdf-lib
pdf.js (Apache 2.0 라이선스): https://github.com/mozilla/pdf.js
위 두 개의 라이브러리를 사용하였으며, chatGPT 등의 도움을 받아 실습 삼아 만들어 보았습니다.
아래는 html 스크립트입니다.
---------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>PDF 합치기 (Merge)</title>
<!-- pdf-lib 및 pdf.js 라이브러리 로드 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<!-- 스타일링 -->
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f3f4f6;
margin: 0;
}
.container {
width: 100%;
max-width: 500px;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 24px;
color: #333;
text-align: center;
}
p {
font-size: 14px;
color: #555;
text-align: left;
}
input[type="file"] {
width: 100%;
padding: 10px;
margin: 10px 0;
font-size: 14px;
}
#file-list {
list-style: none;
padding: 0;
margin: 10px 0;
}
#file-list li {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin: 5px 0;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f9f9f9;
}
.move-buttons button {
padding: 5px;
margin: 0 2px;
background: #4a90e2;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
}
.move-buttons button:hover {
background: #357ABD;
}
#merge-button {
width: 100%;
padding: 12px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
#merge-button:hover {
background-color: #218838;
}
footer {
text-align: left;
font-size: 12px;
color: #777;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>PDF 합치기</h1>
<p>여러 개의 PDF를 하나로 합칠 수 있습니다.</p>
<p>1. "파일 선택" 버튼을 눌러 합칠 파일을 선택하세요.</p>
<input type="file" id="file-input" multiple accept="application/pdf" />
<p>2. 아래 목록에서 ↑↓를 눌러 순서를 조정하세요.</p>
<ul id="file-list"></ul>
<p>3. 순서를 확인한 후 "PDF 합치기" 버튼을 누르세요.</p>
<button id="merge-button">PDF 합치기</button>
<footer>
<p><strong>사용된 라이브러리</strong></p>
<ul>
<li>pdf-lib (MIT 라이선스): <a href="https://github.com/Hopding/pdf-lib">https://github.com/Hopding/pdf-lib</a></li>
<li>pdf.js (Apache 2.0 라이선스): <a href="https://github.com/mozilla/pdf.js">https://github.com/mozilla/pdf.js</a></li>
</ul>
</footer>
</div>
<script>
const fileInput = document.getElementById('file-input');
const fileList = document.getElementById('file-list');
fileInput.addEventListener('change', () => {
fileList.innerHTML = '';
Array.from(fileInput.files).forEach((file, index) => {
const li = document.createElement('li');
li.textContent = file.name;
li.dataset.index = index;
// 이동 버튼 추가
const moveButtons = document.createElement('div');
moveButtons.classList.add('move-buttons');
const upButton = document.createElement('button');
upButton.textContent = '↑';
upButton.addEventListener('click', () => moveItem(li, -1));
const downButton = document.createElement('button');
downButton.textContent = '↓';
downButton.addEventListener('click', () => moveItem(li, 1));
// 삭제 버튼 추가
const deleteButton = document.createElement('button');
deleteButton.textContent = '삭제';
deleteButton.style.background = '#dc3545';
deleteButton.style.marginLeft = '5px';
deleteButton.addEventListener('click', () => li.remove());
moveButtons.appendChild(upButton);
moveButtons.appendChild(downButton);
moveButtons.appendChild(deleteButton);
li.appendChild(moveButtons);
fileList.appendChild(li);
});
});
function moveItem(item, direction) {
const sibling = (direction === -1) ? item.previousElementSibling : item.nextElementSibling;
if (sibling) {
fileList.insertBefore(item, direction === -1 ? sibling : sibling.nextElementSibling);
}
}
document.getElementById('merge-button').addEventListener('click', async () => {
const files = Array.from(fileList.children).map(li => fileInput.files[li.dataset.index]);
const mergedPdf = await PDFLib.PDFDocument.create();
for (let file of files) {
const arrayBuffer = await file.arrayBuffer();
const pdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);
const pages = await mergedPdf.copyPages(pdfDoc, pdfDoc.getPageIndices());
pages.forEach(page => mergedPdf.addPage(page));
}
const pdfBytes = await mergedPdf.save();
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'merged.pdf';
a.click();
URL.revokeObjectURL(url);
});
</script>
</body>
</html>
'[정보] IT정보&활용' 카테고리의 다른 글
PDF 나누기(split) (2) | 2024.11.06 |
---|---|
[구글 Apps Script] PDF로 출력하기 (0) | 2024.10.23 |
[구글 스프레드 시트] 서명받기 (0) | 2024.08.27 |
컴퓨터 예약 종료 배치파일(.bat) 만들기 (0) | 2024.06.21 |
yt-dlp를 쉽게... 배치파일(bat) 만들기 (0) | 2024.05.29 |
설정
트랙백
댓글
글
[구글 Apps Script] PDF로 출력하기
[구글 스프레드 시트]로 일지를 만든 경우, 이 일지의 날짜를 하나하나 변경하면서 PDF로 출력해 저장해주는 스크립트 입니다.
이 모두를 묶어서 하나의 PDF로 구현하는 것을 고민하였으나, 아직까지 구글에서는 PDF 합치기 기능은 제공하고 있지 않는거 같습니다.
메뉴바에 출력 버튼이 만들어지고, 적용 월을 입력하면, 그 달에 해당하는 일지를 모두 PDF로 만들어줍니다.
단, 한꺼번에 많은 양을 PDF로 변환하면 구글에서 오류 메시지를 나타내었습니다.
해서 10개씩 출력한 후 30초 기다렸다가 다시 출력하도록 했습니다.
그래서 모두 PDF로 변환되는데 3분 안쪽의 시간이 필요합니다.
// 이후의 각주를 참고하셔서 자신의 시트에 맞게 수정해서 사용하시면 됩니다.
또한 PDF가 저장될 폴더에 접근 권한을 열어 두는거 잊지마세요~
----------------------------------
Code.gs
----------------------------------
function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('출력')
.addItem('월 입력', 'generatePDFsByMonth')
.addToUi();
}
function generatePDFsByMonth() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet1Name = 'DATA';
var sheet2Name = '일지'; // 출력서식이 있는 시트명을 정확히 지정해주세요.
var dateCell = 'A3'; // '일지' 시트에서 날짜가 입력되는 셀입니다.
var outputRange = 'A1:G25'; // '일지' 시트의 출력범위를 조정합니다.
var dataRange = 'A2:A'; // 'DATA'시트에서의 날짜 데이터 범위
var folderId = '1OlXGiKJyeixZ0j4PLIkWl1xxffBZVQZ0'; // PDF가 저장될 폴더의 ID입니다.
var sheet1 = ss.getSheetByName(sheet1Name);
var sheet2 = ss.getSheetByName(sheet2Name);
var folder = DriveApp.getFolderById(folderId);
var ui = SpreadsheetApp.getUi();
var response = ui.prompt('월을 입력하세요 (YYYY-MM)', ui.ButtonSet.OK_CANCEL);
if (response.getSelectedButton() == ui.Button.OK) {
var month = response.getResponseText().trim();
var data = sheet1.getRange(dataRange + sheet1.getLastRow()).getValues();
var filteredData = data.filter(function(row) {
return row[0] && formatDate(row[0]).includes(month);
});
for (var i = 0; i < filteredData.length; i += 10) {
var chunk = filteredData.slice(i, i + 10);
chunk.forEach(function(row) {
sheet2.getRange(dateCell).setValue(formatDate(row[0]));
SpreadsheetApp.flush();
Utilities.sleep(1000); // 데이터를 로드하는 데 충분한 시간을 두기 위해 1초 대기
var pdfBlob = createPDF(sheet2, formatDate(row[0]) + '_' + sheet2Name + '.pdf', outputRange, folder);
folder.createFile(pdfBlob);
});
Utilities.sleep(30000); // 10개의 파일 생성 후 30초 대기
}
if (filteredData.length > 0) {
ui.alert('PDF 저장이 완료되었습니다: ' + month);
} else {
ui.alert('입력된 월에 해당하는 데이터가 없습니다: ' + month);
}
}
}
function formatDate(date) {
var d = new Date(date);
var year = d.getFullYear();
var month = ('0' + (d.getMonth() + 1)).slice(-2);
var day = ('0' + d.getDate()).slice(-2);
return year + '-' + month + '-' + day;
}
function createPDF(sheet, fileName, range, folder) {
var sheetName = sheet.getName();
var url = 'https://docs.google.com/spreadsheets/d/' + SpreadsheetApp.getActiveSpreadsheet().getId() +
'/export?exportFormat=pdf&format=pdf' +
'&size=A4' +
'&portrait=true' +
'&fitw=true' +
'&sheetnames=false&printtitle=false' +
'&pagenumbers=false' +
'&gridlines=false' +
'&fzr=false' +
'&gid=' + sheet.getSheetId() +
'&range=' + range;
var token = ScriptApp.getOAuthToken();
var response = UrlFetchApp.fetch(url, {
headers: {
'Authorization': 'Bearer ' + token
}
});
var pdfBlob = response.getBlob().setName(fileName);
return pdfBlob;
}
'[정보] IT정보&활용' 카테고리의 다른 글
PDF 나누기(split) (2) | 2024.11.06 |
---|---|
PDF 파일 합치기(수정) (1) | 2024.11.01 |
[구글 스프레드 시트] 서명받기 (0) | 2024.08.27 |
컴퓨터 예약 종료 배치파일(.bat) 만들기 (0) | 2024.06.21 |
yt-dlp를 쉽게... 배치파일(bat) 만들기 (0) | 2024.05.29 |
설정
트랙백
댓글
글
구글 Apps Script로 후원신청서 만들기
구글 Apps Script로 입력폼을 만들고, 입력된 데이터들이 구글 스프레드 시트에 저장되도록 하는 스크립트를 구현해 보았습니다.
Apps Script는 두 개의 파일로 작동합니다.
Code.gs라는 이름의 스크립트 파일과 웹화면을 통해 보여질 index.html이 그것입니다.
※ 이 스크립트는 기본적으로 구글 스프레드 시트의 Apps Script를 다룰 줄 아는 사람을 대상으로 하기 때문에 스크립트 적용 이전단계에 대해서는 설명하지 않습니다.
Code.gs
// 스프레드시트 ID와 시트 이름, 서명이미지 저장 폴더 ID를 변수로 선언
var SPREADSHEET_ID = ' YOUR_SPREADSHEET_ID';
var SHEET_NAME = '시트1';
var FOLDER_ID = ' YOUR_FOLDER_ID';
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function sendUserData(name, gender, ssn_a, ssn_b, cphone_n, phone_n, address, e_mail, s_term, s_type, s_money, s_how, s_item, s_item_q, s_unit, s_sector, s_why, s_path, receipt1, receipt2, a_date, signature) {
var sheet = SpreadsheetApp.openById(SPREADSHEET_ID).getSheetByName(SHEET_NAME);
var imageUrl = saveSignatureToDrive(signature, name);
sheet.appendRow([
name, gender, ssn_a, ssn_b,
"'" + cphone_n, // 앞에 작은 따옴표 추가
"'" + phone_n, // 앞에 작은 따옴표 추가
address, e_mail, s_term, s_type, s_money, s_how,
s_item, s_item_q, s_unit, s_sector, s_why, s_path,
receipt1, receipt2, a_date, '=IMAGE("' + imageUrl + '")'
]);
}
function saveSignatureToDrive(signature, name) {
var folder = DriveApp.getFolderById(FOLDER_ID);
var blob = Utilities.newBlob(Utilities.base64Decode(signature.split(',')[1]), 'image/png', name + '_signature.png');
var file = folder.createFile(blob);
var fileId = file.getId();
}
|
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<title>부민노인복지관 후원신청서</title>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@5.0.3/dist/signature_pad.umd.min.js"></script>
<style>
#sig {
background-color: #e0e0e0;
border: 1px solid black;
width: 500px;
height: 300px;
}
#s_item_q, #ssn_a {
width: 6em;
}
#ssn_b {
width: 7em;
}
#savingMessage {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: 1px solid black;
padding: 20px;
z-index: 1000;
}
</style>
</head>
<body>
<p>부민노인복지관 후원신청서</p>
<form id="donationForm">
<label>이름</label>
<input type="text" id="name" name="name" placeholder="이름" required><br>
<label>성별</label>
<input type="radio" name="gender" value="남">남자
<input type="radio" name="gender" value="여">여자<br>
<label>주민등록번호</label>
<input type="text" id="ssn_a" name="ssn_a" size="6" maxlength="6" required>-
<input type="password" id="ssn_b" name="ssn_b" size="7" maxlength="7" required><br>
<label>휴대전화</label>
<input type="text" id="cphone_n" name="cphone_n" size="11" maxlength="11"> ※ 숫자만 입력<br>
<label>일반전화</label>
<input type="text" id="phone_n" name="phone_n" size="11" maxlength="11"> ※ 숫자만 입력<br>
<label>주소</label>
<input type="text" id="address" name="address" size="30"><br>
<label>이메일</label>
<input type="text" id="e_mail" name="e_mail" size="30"><br>
<label>후원방식</label>
<input type="radio" name="s_term" value="정기">정기
<input type="radio" name="s_term" value="비정기">비정기<br>
<label>후원구분</label>
<input type="radio" name="s_type" value="지정">지정
<input type="radio" name="s_type" value="비지정">비지정<br>
<label>후원금</label>
<input type="text" id="s_money" name="s_money">원<br>
<label>후원방법</label>
<input type="radio" name="s_how" value="자동이체">자동이체
<input type="radio" name="s_how" value="현금납부">현금납부
<input type="radio" name="s_how" value="CMS">CMS 이체
<input type="radio" name="s_how" value="기타">기타<br>
<label>후원품</label>
(품명) <input type="text" id="s_item" name="s_item"> /
(수량) <input type="number" id="s_item_q" name="s_item_q" size="4"> /
(단위) <select id="s_unit" name="s_unit">
<option value="">---</option>
<option value="개">개</option>
<option value="세트">세트</option>
<option value="Box">Box</option>
<option value="건">건</option>
<option value="Kg">Kg</option>
<option value="명">명</option>
<option value="포">포</option>
<option value="g">g(그램)</option>
<option value="리터">리터</option>
<option value="대">대</option>
<option value="장">장</option>
<option value="통">통</option>
<option value="판">판</option>
<option value="병">병</option>
<option value="마리">마리</option>
<option value="봉지">봉지</option>
<option value="팩">팩</option>
<option value="묶음">묶음</option>
<option value="그루">그루</option>
<option value="송이">송이</option>
<option value="포기">포기</option>
<option value="자루">자루</option>
<option value="인분">인분</option>
<option value="짝">짝</option>
<option value="포대">포대</option>
<option value="기타">기타</option>
</select><br>
<label>후원분야</label>
<select id="s_sector" name="s_sector">
<option value="">---------</option>
<option value="밑반찬지원">밑반찬지원</option>
<option value="저소득노인 무료급식사업">저소득노인 무료급식사업</option>
<option value="위기 및 취약노인 사업">위기 및 취약노인 사업</option>
<option value="지역복지 연계사업">지역복지 연계사업</option>
<option value="명절 정나눔 행사">명절 정나눔 행사</option>
<option value="기타">기타</option>
</select><br>
<label>참여동기</label>
<select id="s_why" name="s_why">
<option value="">---------</option>
<option value="경제적 여유가 있어서">경제적 여유가 있어서</option>
<option value="불우한 이웃을 돕기위해">불우한 이웃을 돕기위해</option>
<option value="지역사회복지를 위해">지역사회복지를 위해</option>
<option value="종교적 신념으로">종교적 신념으로</option>
<option value="기타">기타</option>
</select><br>
<label>참여경로</label>
<select id="s_path" name="s_path">
<option value="">---------</option>
<option value="기존 후원자/자원봉사자 소개를 통해">기존 후원자/자원봉사자 소개를 통해</option>
<option value="복지관 소식지나 안내물을 통해">복지관 소식지나 안내물을 통해</option>
<option value="언론매체를 통해">언론매체를 통해(TV, 라디오, 신문 등)</option>
<option value="특정 행사 및 기념일 축하">특정 행사 및 기념일 축하</option>
<option value="기타">기타</option>
</select><br>
<label>후원금영수증 발급</label><br>
<input type="checkbox" name="receipt1" value="후원금영수증 필요">후원금 영수증 필요<br>
<input type="checkbox" name="receipt2" value="국세청 연말정산 간소화 후원내역 제공 동의">국세청 연말정산 간소화 후원내역 제공 동의 <br>
<label>신청일자</label>
<input type="date" id="a_date" name="a_date"><br>
<label>서명</label><br>
<canvas id="sig"></canvas><br>
<button type="button" id="clearSig">서명 지우기</button><br><br>
<button type="button" onclick="submitData()">제출</button>
</form>
<div id="savingMessage">저장 중입니다...</div>
<script>
var signaturePad;
function setupSignatureBox() {
var canvas = document.getElementById("sig");
canvas.width = 500; // 명시적으로 크기 설정
canvas.height = 300; // 명시적으로 크기 설정
signaturePad = new SignaturePad(canvas);
}
function clearSignature() {
signaturePad.clear();
}
function submitData() {
const form = document.getElementById('donationForm');
const formData = new FormData(form);
// 필수 입력 필드 확인
if (!formData.get('name') || !formData.get('ssn_a') || !formData.get('ssn_b') || !formData.get('cphone_n') || signaturePad.isEmpty()) {
alert('성명, 주민등록번호, 서명은 필수 입력 항목입니다.');
return;
}
const data = {
name: formData.get('name'),
gender: formData.get('gender'),
ssn_a: formData.get('ssn_a'),
ssn_b: formData.get('ssn_b'),
cphone_n: formData.get('cphone_n'),
phone_n: formData.get('phone_n'),
address: formData.get('address'),
e_mail: formData.get('e_mail'),
s_term: formData.get('s_term'),
s_type: formData.get('s_type'),
s_money: formData.get('s_money'),
s_how: formData.get('s_how'),
s_item: formData.get('s_item'),
s_item_q: formData.get('s_item_q'),
s_unit: formData.get('s_unit'),
s_sector: formData.get('s_sector'),
s_why: formData.get('s_why'),
s_path: formData.get('s_path'),
receipt1: formData.get('receipt1') ? '필요' : '불필요',
receipt2: formData.get('receipt2') ? '동의' : '미동의',
a_date: formData.get('a_date'),
signature: signaturePad.toDataURL()
};
document.getElementById('savingMessage').style.display = 'block'; // 저장 중 메시지 표시
google.script.run.withSuccessHandler(() => {
document.getElementById('savingMessage').style.display = 'none'; // 저장 중 메시지 숨기기
alert('데이터가 성공적으로 저장되었습니다.');
}).withFailureHandler(error => {
document.getElementById('savingMessage').style.display = 'none'; // 저장 중 메시지 숨기기
console.error('Error:', error);
alert('데이터 저장 중 오류가 발생했습니다. 다시 입력해주세요.');
}).sendUserData(
data.name, data.gender, data.ssn_a, data.ssn_b, data.cphone_n, data.phone_n,
data.address, data.e_mail, data.s_term, data.s_type, data.s_money, data.s_how,
data.s_item, data.s_item_q, data.s_unit, data.s_sector, data.s_why, data.s_path,
data.receipt1, data.receipt2, data.a_date, data.signature
);
}
document.getElementById("clearSig").addEventListener("click", clearSignature);
document.addEventListener("DOMContentLoaded", setupSignatureBox);
</script>
</body>
</html>
|
입력 폼은 아래 링크와 같이 보여지게 됩니다.
'[楞嚴] 생각 나누기 > [情] 사회복지정보화' 카테고리의 다른 글
Apps Script를 활용해 스프레드 시트로 데이터 전송하기 (0) | 2024.09.23 |
---|---|
폰트 저작권 이슈에 대한 점검 (0) | 2020.08.12 |
코로나19 상황에 대한 전화설문조사 결과 (0) | 2020.07.08 |
QR코드를 활용한 출입자 관리 - 노인복지관용 (3) | 2020.06.24 |
ⓝ세대 가족을 위한 사이버복지관의 설립과 역할 (0) | 2017.01.05 |
설정
트랙백
댓글
글
Apps Script를 활용해 스프레드 시트로 데이터 전송하기
우리가 입력하는 데이터를 구글 스프레드 시트에 저장되게 하려면 어떻게 해야할까요?
기본적으로 구글 설문지 폼을 사용하면 스프레드 시트에 저장되는 것을 확인할 수 있습니다.
이걸 내가 원하는 대로 할 수는 없을까요?
일반적으로 생각했을 때 2개의 서식이 필요하단 사실은 떠올릴 수 있을 것입니다.
첫번째로 데이터를 입력하는 서식이며, 이는 웹 화면을 통해 보여질 것입니다.
구글 스프레드시트의 Apps Script에서는 기본값으로 index.html을 설정해두고 있습니다.
두번째로 입력된 데이터가 스프레드 시트에 차곡차곡 쌓여야할 것입니다.
이를 위한 스프레드 시트 파일(SpreadSheet)이 필요합니다.
그런데 하나가 더 필요합니다.
이 두 파일을 연결할 연결고리, 그것이 Apps Script 입니다.
Code.gs가 바로 그것입니다.
자, 정리하자면, 데이터입력을 담당하는 index.html, 데이터를 받아서 저장할 SpreadSheet, 마지막으로 이 둘을 연결하는 Code.gs가 필요합니다.
이때 필요한 가장 기본적인 코드를 정리해보겠습니다.
- index.html
<!DOCTYPE html> <html> <head> <base target="_top"> <!-- 아래 스크립트를 통해 구글 스프레드 시트에 저장하게 됩니다. --> <script> function onSuccess(){ alert("저장완료"); } function resister() { let inputEl = document.getElementsByTagName("input"); let inputData = []; for(element of inputEl) { inputData.push(element.value); } google.script.run.withSuccessHandler(onSuccess).sendUserData(inputData); } </script> <!-- 여기까지 --> </head> <body> <p>데이터 입력</p> <!-- 아래 input 태그를 통해 데이터가 입력되며, resister()를 통해 등록됩니다. --> <label>종류</label> <input type="text" name="type"><br> <label>수량</label> <input type="number" name="number"><br> <label>유효기간</label> <input type="date" name="deadline"><br> <button onclick="resister()">등록</button> <!-- 여기까지. 위에 input은 더 많이 추가해도 됩니다. --> </body> </html> |
- Code.gs
- index.html과 소통하기 위해 필요한 함수
function doGet() { return HtmlService.createHtmlOutputFromFile('index'); } |
- 아래 3개 중 필요에 따라 선택
function sendUserData(inputData) { let ss = SpreadsheetApp.getActiveSheet(); ss.appendRow(inputData); } |
▲ 구글 스프레드 시트에서 바로 App Script를 만든 경우로 시트가 하나 뿐인 경우. 별도의 지정없이 바로 작동합니다. |
function sendUserData(inputData) { let sheetName = '시트1'; // 시트 이름을 변수로 선언 let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName); ss.appendRow(inputData); } |
▲ 시트가 여러개인 경우 시트명을 변수로 지정토록 하였습니다. ’시트1’을 수정하세요. |
function sendUserData(inputData) { // 스프레드시트 파일 ID 및 시트 이름 설정 const spreadsheetId = 'YOUR_SPREADSHEET_ID'; // 여기에 스프레드시트 파일 ID를 입력 const sheetName = '시트1'; // 스프레드시트 및 시트 가져오기 const spreadsheet = SpreadsheetApp.openById(spreadsheetId); const sheet = spreadsheet.getSheetByName(sheetName); // 데이터 추가 sheet.appendRow(inputData); } |
▲ 파일명(고유ID)와 시트명을 모두 변수로 설정합니다. ’YOUR_SPREADSHEET_ID’에 스프레드 시트 파일의 ID를 직접 입력합니다. ’시트1’에 시트명을 직접 입력합니다. |
여기까지가 기본적인 처리방법입니다.
index.html을 수정함으로써 입력화면을 좀더 다양하게 꾸밀 수 있으며, 스프레드 시트로 보낼 데이터도 추가할 수 있을 것입니다.
'[楞嚴] 생각 나누기 > [情] 사회복지정보화' 카테고리의 다른 글
구글 Apps Script로 후원신청서 만들기 (2) | 2024.09.30 |
---|---|
폰트 저작권 이슈에 대한 점검 (0) | 2020.08.12 |
코로나19 상황에 대한 전화설문조사 결과 (0) | 2020.07.08 |
QR코드를 활용한 출입자 관리 - 노인복지관용 (3) | 2020.06.24 |
ⓝ세대 가족을 위한 사이버복지관의 설립과 역할 (0) | 2017.01.05 |
RECENT COMMENT