개발꿀팁 [JavaScript/php]모바일 클라이언트 측에서 생성된 파일 저장하기
페이지 정보
작성자 공공칠빵
작성일 2021-12-03 12:00 조회 1,141회
댓글 0건
본문
관련링크
안녕하세요. GIS분야를 개발하는 사람인데 간혹 보고서 출력으로 애를 먹었었던적이 많았습니다.
예전엔 주로 서버에 백앤드로 엑셀을 품은 프로그램으로 대처하다가 올해 SpreadJS를 알게되어 엄청 기뻐했었습니다.
그리고 GIS분야 개발자에게도 홍보를 했지요^^
관련글 "[html/JavaScript] 순수 JavaScript 기반의Web-Excel 컴포넌트"은 본 카페회원들을 위한 글입니다.
그리고 이번엔 모바일에의 SpreadJS사용을하다가 요구받은 사항을 조치하다가 정리한 팁입니다.
자세한글 링크 : https://cafe.naver.com/gisapplication/1155
[JavaScript/php]모바일 클라이언트 측에서 생성된 파일 저장하기
일반 PC버전에서는 서버없이 클라이언트 측에서 생성된 파일을 저장시 FileSaver.JS의 saveAs로 저장할 수 있습니다만, 모바일에서는 보안정책상 제한을 하여 여러 방식으로 하고있으나 계속적인 정책변경으로 수정이 필요하였습니다. 이번에는 여러방안중 PHP를 사용하는 방법을 정리하였습니다.
[JavaScript 모바일 하이브리드 개발 답변] You won't be able to do this with JS only because Android can only download files how have a http link. So local generated files won't work that you have created in Js. Android는 http 링크가 있는 방법으로만 파일을 다운로드할 수 있기 때문에 JS로만 이 작업을 수행할 수 없습니다. 따라서 Js에서 생성한 로컬 생성 파일은 작동하지 않습니다. |
* 구현사항
- SpreadJS(순수 JavaScript Excel 스프레드시트 컴포넌트 : https://cafe.naver.com/gisapplication/1147)
에서 작성한 엑셀파일을 모바일에서 pdf파일로 저장해야한다.
* 모바일에서의 제한사항
- 서버의 엑셀파일을 읽어 로컬에서 수정하여 보안상의 오염으로 모바일에서는 파일로 저장할 수 없다.
- 서버에 백앤드로 어떠한 프로그램을 대기 시킬 필요가 없이 PHP로 Blob형식으로 Post전송을 하여,
서버의 특정 폴더에 파일을 생성하고 요청한 클라이언트에서 다운로드할 수 있도록 url을 반환하여 링크로
모바일에 저장하도록 한다.
* 구현 방안
(1) JavaScript 클라이언트에서의 구현
- 로컬로 생성한 파일을 엑셀에서 pdf로 변환한다. 이때 한글 폰트을 정의하여 한글 깨짐을 보완한다.
- 기존에는 각 PC별 프린터 드라이버를 이용하므로 미리보기와 용지 설정등을 하여 pdf로 저장하여 융통성
있게 구현하였으나 서버에 저장후 링크해야하므로 자체 pdf파일로 변환해야했다. 따라서 한글깨짐을 방지
하기 위해 폰트을 로딩해야하고 변환해야하므로 시간은 조금 지체된다.
(가) 사용할 한글 폰트파일 ttf을 base64형식으로 변환 후 선언/정의
(나) 사용할 한글 폰트을 디폴트 폰트에 대체 등록한다.
var fontOBJ = {normal: fonts['MALGUN.TTF']}; GC.Spread.Sheets.PDF.PDFFontsManager.registerFont('Calibri', fontOBJ); |
(다) 엑셀을 pdf Blob으로 변환하여 서버의 PHP로 전송후 파일 링크를 받아와 저장한다.
- 중요한건 pdf Blob을 바로 전송하는게 아니라 base64로 변환 후 PHP에서 디코딩후 사용한다.
function FileServerSave() { var _mainurl = "/sql_php/"; workbook.savePDF(function (blob) { var reader = new FileReader(); reader.readAsDataURL(blob); reader.onloadend = function() { var base64data = reader.result; TpPHP(base64data); } function TpPHP(blob_data){ var formData = new FormData(); formData.append('Fileblob', blob_data); $.ajax(_mainurl + 'FileServerSave.php', { method: "POST", data: formData, processData: false, contentType: false, success: function (data) { var element = document.createElement('a'); element.setAttribute('href', _mainurl + data); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); }, error: function (data) {
} }); } }, function (error) { },{
}); } |
(2) 서버의 PHP에서의 구현
- pdf blob을 base64으로 받아 디코딩하여 서버의 특정 폴더에 파일로 저장후 해당파일명을 반환한다.
<?php $theDate = new DateTime(); $stringDate = $theDate->format('YmdHis'); $name = 'im_file/' . $stringDate.'.pdf'; $base64string = $_POST['Fileblob']; if (strpos($base64string, ',') !== false) { @list($encode, $base64string) = explode(',', $base64string); } $blob = base64_decode($base64string, true); file_put_contents($name, $blob); echo $name; ?> |
댓글목록
등록된 댓글이 없습니다.
