Frontend 검색 결과

해당 글 73건

html -> pdf 다운로드 (html2canvas + jsPDF)

데이터의 결과를 나타내는 페이지를 보고서 형식 비슷하게 출력을 해야하는데 html 내용을 pdf로 다운로드 할 수 있는 라이브러리가 있어서 정리하는 글이다. html2canvas html2canvas 라이브러리는 이름 대로 html에 있는 내용을 canvas에 옮겨담아 사진처럼 찍어내주는 라이브러리이다. html2canvas.js 공식 홈페이지에서 볼 수 있듯이 샘플 예제도 심플하다. (다운로드를 하기위해 스크립트를 일부 추가) Hello world! function saveAs(uri, fileName) { const link = document.createElement("a"); link.href = uri; link.download = fileName; document.body.appendChild..
Frontend/Javascript 2021. 2. 26. 15:28

Chart.js 차트 엑셀 다운로드 (export to excel)

차트를 표현해주는 라이브러리 중 Chart.js 사용에 대해 정리하는 글이다. 최종목표는 차트를 이미지화 하여 엑셀로 다운로드까지 하는 것이다. Chart.js Chart.js(Chart.js | Open source)는 오픈 소스이며 데이터를 다양한 차트로 시각화 해주는 Javascript 라이브러리 중 하나이다. Sample Page를 살펴보면 차트의 기본인 Line, Pie, Doughnut, Bar 등이 있다. Chart.js Sample Page Sample Chart.js를 사용하려면 CDN이나 JS를 다운받아 Import 하면된다. Chart.js CDN by jsDelivr 라인 파이 도넛 막대(세로) 막대(가로) 위 예제 소스를 실행하면 다음과 같이 Bar 형태 차트가 생성된다. 이 상태..
Frontend/Javascript 2021. 2. 23. 13:30

$(function) 안 될 때 / $(document).ready 안 될 때

아주 어처구니 없는 상황이 있어서 메모해 둔다... 테스트 환경은 frame > document 에서 실행 (frame과 상관없는 것 같음. 똑같은 환경 다른 사이트는 잘 작동함) $(function) / $(document).ready DOM이 생성되었을 시점에 실행할 스크립트를 jQuery를 사용할 때 다음과 같이 사용한다. $(function() { console.log("test"); }); 위 이미지 처럼 글쓴이는 안에 jQuery 스크립트가 선언되어있다. 하지만 개발자도구에 찍힌 로그는 빈란.. 그래서 먼저 체크한 것은 정말로 jQuery가 로드가 되었는지 확인할 필요가 있어서 다음처럼 스크립트를 추가했다. // jQuery 존재하는지 판단하여 없으면 스크립트 CDN 삽입 if (typeof ..
Frontend/jQuery 2020. 12. 16. 14:56

HTML5 + HLS JS를 이용한 실시간 스트리밍 영상 재생하기

Adobe Flash Player 지원 중단 여기저기에서 시끌벅적한 Adobe Flash Player 지원 중단 이라는 글귀를 2020년 하반기 내내 보았을 것 이다. 마소 공식입장은 링크 누르고 확인 가능하다. Microsotf 공식입장 구글은 이런 문구를 띄우고 사용 중지를 권했다. 심지어 Adobe 에서는 지원 중단하니 삭제를 권했다. 글쓴이는 기존에 동영상 스트리밍 서비스에 대해 rtmp를 사용하고 있었는데 지원 중단된다는 소식을 접하고 rtmp 란 ? 리얼 타임 메시징 프로토콜(Real Time Messaging Protocol, 흔히 줄여서 RTMP)은 어도비 시스템즈사의 독점 컴퓨터 통신 규약이다. RTMP는 오디오, 비디오 및 기타 데이터를 인터넷을 통해 스트리밍할 때 쓰인다. RTMP는 ..
Frontend/Javascript 2020. 12. 10. 14:17

Form 태그 동적으로 만들어서 POST 전송 (Vanilla JS, jQuery)

가끔 form 태그를 직접 만들어서 submit 해야하는 경우가 있다. Vanilla Javascript Vanilla Javascript로 하면 다음과 같다. function createForm() { var form = document.createElement("form"); form.setAttribute("id", "form"); form.setAttribute("method", "Get / Post"); form.setAttribute("action", "action URL"); // encoding 필요 시 // form.setAttribute("encType", "application/x-www-form-urlencoded"); var hiddenField = document.createEl..
Frontend/Javascript 2020. 12. 8. 13:50

Unite Gallery 를 이용한 반응형 갤러리 만들기

갤러리 형태를 html, css, javascript 로 구성을 하다가 괜찮은 플러그인이 없는지 찾아보았는데 마침 괜찮은게 있어서 메모해보려 한다. Unite Gallery Unite Gallery 플러그인은 다양한 형태의 갤러리를 제공한다. Unite Gallery 진짜 너~무 많으니 직접 둘러보길 바라며 다음은 설정하는 부분이다. Compact Theme - left panel position 글쓴이는 Compact Theme - left panel position 형태를 사용해 보았다. 메인 이미지가 우측에 큰 사이즈로 나오며 좌측에 스크롤 형태로 작은 이미지들이 썸네일로 표시된다. 좌측 패널 쪽에서 마우스 휠을 이용한 스크롤이 아니라 마우스를 위아래로 움직이면 자동 스크롤링되며 썸네일을 클릭하면 ..
Frontend/jQuery 2020. 12. 3. 15:38

실시간 콤마

function getNumber(obj){ var num01; var num02; num01 = obj.value; num02 = num01.replace(/\D/g,""); //숫자가 아닌것을 제거, //즉 [0-9]를 제외한 문자 제거; /[^0-9]/g 와 같은 표현 num01 = setComma(num02); //콤마 찍기 obj.value = num01; } function setComma(n) { var reg = /(^[+-]?\d+)(\d{3})/; // 정규식 n += ''; // 숫자를 문자열로 변환 while (reg.test(n)) { n = n.replace(reg, '$1' + ',' + '$2'); } return n; } 원
Frontend/Javascript 2020. 11. 17. 09:57

정규식 모음

/** * 입력값 검사를 수행하기 위한 객체 (라이브러리) */ var regex = { /** * 입력 값의 존재 여부를 검사한다. * @param {string} selector 입력요소의 css셀렉터 * @param {string} msg 값이 없을 경우 표시될 메시지 * @return {boolean} 입력된 경우 true / 입력되지 않은 경우 false */ value: function(selector, msg) { // 대상 요소를 가져온다. var target = $(selector); // 값이 없다면? if(!target.val()) { // 메시지 표시 alert(msg); setTimeout(function() { // 대상요소에게 포커스 강제 지정 target.focus(); },..
Frontend/Javascript 2020. 11. 6. 10:17

두 날짜 일수 계산 & 주말 제외 일수 계산

// 두개의 날짜를 비교하여 차이를 알려준다. function dateDiff(_date1, _date2) { var diffDate_1 = _date1 instanceof Date ? _date1 : new Date(_date1); var diffDate_2 = _date2 instanceof Date ? _date2 : new Date(_date2); diffDate_1 =new Date(diffDate_1.getFullYear(), diffDate_1.getMonth()+1, diffDate_1.getDate()); diffDate_2 =new Date(diffDate_2.getFullYear(), diffDate_2.getMonth()+1, diffDate_2.getDate()); var diff..
Frontend/Javascript 2020. 8. 4. 16:05