Jeffrey Oh's Notepad

Frontend/Javascript 검색 결과

해당 글 31건

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

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

Google Web Page Traslation

Cloud Translation은 복잡하게 API를 신청하고 프로젝트 생성하고 결제 계정도 만들어야하고 뭔가 전문적이다. 그 정도까지가 아닌 간단한 번역기를 원한다면 아래와 같은 소스를 추가하자 언어셋은 추가 가능하니 찾아서 추가하자 안녕하세요

Frontend/Javascript 2020. 11. 23. 15:26

실시간 콤마

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

cors jsonp 형식으로 ajax 처리하기

cors jsonp 형식으로 ajax 처리하기 첫번째, 요청 URL뒤에 ?callback=? 추가하여 jsonp 요청 구현하기 $.getJSON("http://www.codejs.co.kr/jsonp.json?callback=?", function(data) { console.log('성공 - ', data); } ); 두번째, 응답 json에 callback함수로 한번 감싸서 jsonp 구현하기 $('a').click(function() { $.ajax({ url: "http://www.codejs.co.kr/jsonp.json", dataType: 'jsonp', jsonpCallback: "myCallback", success: function(data) { console.log('성공 - ', d..

Frontend/Javascript 2020. 7. 18. 10:16

Browser OS Check By Easy Version

// includes는 IE에서 동작하지 않아서 indexOf를 사용 var userAgent = window.navigator.userAgent; var isChrome = userAgent.indexOf('Chrome'); var isChromeMobile = userAgent.indexOf('CriOS'); var isSamsungBrowser = userAgent.indexOf('SamsungBrowser'); var isWindows = userAgent.indexOf('Windows NT'); var isEdge = userAgent.indexOf('Edge'); var isIE = userAgent.indexOf('Trident'); // 크롬 브라우저 체크 if(isChrome > -1 |..

Frontend/Javascript 2020. 5. 22. 16:37