반응형 웹개발/js9 script 웹페이지 잘리지 않게 PDF 파일로 만들기 먼저 준비물 bluebird는 익스플로러에서 작동하게 하려면 꼭 필요하다. jspdf는 pdf 생성해주는 라이브러리, html2canvas는 html 페이지를 이미지로 만들어주는 라이브러리이다. 주의사항 html2canvas는 html페이지와 같은 도메인에 올라가 있는 이미지만 불러올 수 있는 것 같다. 외부 cdn 이미지를 이용하면 출력되지 않는다. (https://stackoverflow.com/questions/31509227/html2canvas-not-rendering-cdn-images) pixabay에 있는 이미지 주소로 이미지를 넣고 실행하니까 전혀 나오지 않아서 찾아보니 이런 내용이 있다. 그래서 따로 호스팅을 파서 같이 올리니 실행이 됨. 데모 http://gyl13.dothome.co.. 2022. 10. 17. Javascript 화면 캡쳐 [html2canvas] 브라우저에서 화면의 모습을 캡쳐하려면 html2canvas라는 오픈소스 라이브러리를 사용하면 구현하기 매우 간단합니다. https://html2canvas.hertzen.com/ 먼저 조금 철(?)지난 소스코드 사용방법 입니다. function click(){ html2canvas( document.querySelector('#대상') , { onrendered: function(canvas) { saveAs(canvas.toDataURL(), '이름.png'); } }); } function saveAs(uri, filename) { var link = document.createElement('a'); if (typeof link.download === 'string') { link.href = ur.. 2022. 10. 17. 쿠키 사용하기. 출처사이트 : https://uoonleen.tistory.com/m/65 ■ 쿠키(Cookie)란? ───── ▶ 웹서버가 웹브라우저에게 보내는 데이터 중의 하나입니다. 웹브라우저는 웹서버로부터 받은 쿠키 데이터를 내부 메모리 또는 별도의 폴더에 저장합니다. 그리고 그 웹서버를 방문할 때마다 쿠키를 요청 헤더(Request Header)에 담아 다시 전달합니다. ▶ 쿠키 생성 - 쿠키의 이름은 'ISO-8859-1'이어야 합니다. 이 말은 한글이 안된다는 것이죠. - 쿠키의 값은 'ISO-8859-1' 문자열이어야 합니다. 만약 한글을 저장하고 싶다면? ▶ URL 인코딩을 하여 저장하면 됩니다. ───── 쿠키의 사용 I : 쿠키 객체 생성 import java.io.IOException; import.. 2022. 2. 18. 쿠키등록 ( 팝업창 하루동안 열지 않기 & 하루에 한번만 띄우기) 출처 : https://ktko.tistory.com/m/109 팝업창 하루동안 열지 않기 & 하루에 한번만 띄우기 구현하기 자바스크립트를 사용해 팝업창을 띄우는 것은 자바스크립트에서 제공하는 window객체를 사용하면 간단하게 만들 수 있습니다. 많은 사이트에서 사이트에서 제공하는 이벤트와 제품홍보를 위해 팝업창을 방문자들에게 수없이 띄우지만 방문자들은 사이트에 방문할 때마다 팝업 닫는 것이 상당히 귀찮다. 그래서 하루동안 팝업을 보지 않기 라는 기능을 제공하고 있습니다. 이 기능을 사용하려면 자바스크립트의 쿠키와 윈도우 객체의 open만 알아야 합니다. main.html 소스 설명 먼저 메인화면 진입 할 때 에서 openPopup 메서드를 실행하게 됩니다. onload()는 모든 콘텐츠(css, 스크.. 2022. 2. 18. JavaScript 키보드 이벤트 생성 출처 : https://itinerant.tistory.com/m/69 [JavaScript] 키보드 이벤트 ( 단축키/hotkey ) 생성하는 방법 ex) `Ctrl + Alt + c` 을 눌렀을 때 이벤트 생성 var isCtrl, isAlt; // ctrl. Alt 눌림 여부 확인 document.onkeyup = function(e) { if (e.which == 17) isCtrl = false; if (e.which == 18) isAlt = false; } document.onkeydown = function(e) { if (e.which == 17) isCtrl = true; if (e.which == 18) isAlt = true; console.log(e.which , isCtrl, i.. 2022. 2. 17. Javascript에서 DOM의 특정 요소(element) 찾는 방법 출처사이트 : https://jhmocu.tistory.com/m/102 자바스크립트 요소(Element) 찾기 * JavaScript를 사용해서 HTML element를 찾는 방법: 1. getElementById('id') 2. getElementsByTagName('tagName') 3. getElemnetsByClassName('class.. jhmocu.tistory.com * JavaScript를 사용해서 HTML element를 찾는 방법: 1. getElementById('id') 2. getElementsByTagName('tagName') 3. getElemnetsByClassName('className') 4. CSS 선택자: querySelectorAll('선택자'), querySe.. 2022. 2. 17. javascript / ajax 배열 request 전송 및 java에서 받기 Java에서 배열 데이터 전송 받기 1. 전송 form PHP와는 다르게 input name에 배열표시 '[]'를 넣지 않아도 된다. 위와같은 데이터를 Controller에서 받을 경우 2. controller @Controller public class TestController { @RequestMapping(value = "/process.do") public String testMethod(HttpServletRequest request, Model model) { String[] arrayParam = request.getParameterValues("name"); for (int i = 0; i < arrayParam.length; i++) { System.out.println(arrayPar.. 2021. 8. 11. Selection 과 Range 사용자가 드래그 등으로 선택한 텍스트 및 위치 출처 : https://ohgyun.com/547 참고: https://developer.mozilla.org/en-US/docs/Web/API/Selection https://developer.mozilla.org/en-US/docs/Web/API/Range https://javascript.info/selection-range# Selection Selection 은 window.getSelection() 이나 다른 메서드의 호출로 생성되는 객체이다. 사용자가 드래그 등으로 여러 엘리먼트에 걸쳐 선택한 텍스트를 대표한다. window또는 document를 이용해서 갖어 올수 있다. function getSelection() { return (window.getSelection) ? window.get.. 2021. 8. 11. javascript Document - 노드 다루기 (찾기, 생성, 삭제) 문서에서 특정 태그 이름을 지닌 노드 찾기 - Document 객체의 getElementsByTagName()을 이용하면 전체 문서에서 매개변수 값의 엘리먼트를 찾을 수 있습니다. var divs = window.document.getElementsByTagName("div"); alert("문서내의 div 엘리먼트 개수 : " + divs.length); for (var i = 0; i < divs.length; i++) { var div = divs.item(i); div.style.border = "1px solid #ff0000"; } 특정노드의 자식노드에서 특정태그 이름을 지닌 노드 찾기 - 문서 전체가 아닌 특정 노드의 자식 가운데 특정 태그 이름을 가진 엘리먼트를 찾고 싶은 경우 Docume.. 2021. 8. 11. 이전 1 다음 반응형
