Programming/JavaScript6 [Javascript] 브라우저 출력 | pdf 다운로드 | window.print() | html to pdf 오늘은 script로 간편하게 pdf 다운로드 및 출력을 할 수 있는 window.print() 함수를 소개해보려고 한다. pdf 보고서 출력같은 경우 서버단에서 별도의 모듈을 통해 가공해서 클라이언트에 던져주는 것이 일반적이다. 그러나 연산처리 등 별도의 가공 없이 화면 상의 정보만으로 간단하게 문서를 생성하고 싶은 경우, script 함수 단 한 줄만으로 브라우저에서 웹문서를 pdf 다운로드, 출력 할 수 있다. 브라우저에서 windows에서 ctrl + p 또는 mac에서 ⌘ + p를 눌렀을 때 뜨는 출력 모달을 띄우도록 제어해주는 것이다. 익스에서는 테스트 안 해봤는데... 뭐... 22년 6월에 종료되니까...(그날이 어서 오길🙏) 사용법은 아주 간단하다! window.onbeforeprint(.. 2021. 7. 6. [Javascript] DOM control 관련 자주 사용하는 문법들 요소 좌표값 구하기, 특정 위치로 스크롤 이동시키기 window.scrollTo를 이용하여 특정 위치로 이동시키기 window.scrollTo를 이용하여 특정 위치로 이동시키기 홈페이지 중에 탭 메뉴를 클릭하면, 특정 위치로 스크롤바가 이동되면서 화면에 보여지는 것을 본 적 있을 것이다. scrollTo() 메서드로 이를 구현할 수 있다. window 객체의 scrollTo 메서드는 문서를 enai.tistory.com textContent textContent의 값은 식별자 노드의 내부 콘텐츠를 text/plain 으로 파싱(Parsing)한 결과. 즉, 해당 요소 내부의 원시 텍스트(raw text)이다. 파싱 속도가 빠르고 보안에 강하다. innerText 줄바꿈, 숨김 등 적용 가능. IE(IE8.. 2021. 6. 6. [Javascript] 내장 함수(inner function)를 활용한 동적인 DOM 구현 자바스크립트로 코딩을 하다보면 모르는 상태로 일단 쓰다가 나중에 개념을 알게 되는 경우가 많은 것 같다. 그 중 하나인 내장 함수의 개념을 먼저 코드로 정리해보자면 이렇다. function outer(){ var introduce="My "; inner1(); inner2(); function inner1(){ introduce += "name is "; return introduce; } function inner2(){ introduce += "Gomak"; return introduce; } console.log(introduce); } - 자바스크립트에서는 함수 안에 또 다른 함수, 즉 inner function을 여러 개 정의할 수 있다. - 각각의 inner function에서는 outer f.. 2019. 9. 2. React App 환경셋팅 및 개념 REACT는 front-end를 쉽게 구현할 수 있는 라이브러리로 node.js(Node Package Manager)와 git 환경에서 셋팅한다. npm install -g create-react-app node_modules : 로컬(프로젝트)의 디펜던시를 관리하는 폴더 public : index.html 파일이 들어가 있는 폴더 src : 리액트 소스가 있는 폴더 .gitignore : git으로 관리하지 않아도 되는 파일을 관리하는 파일 package.json : node 패키지 매니저(디펜던시 관리) 파일 yarn.lock : yarn이 관리하는 패키지 버전을 보관하는 파일 Components & Props https://ko.reactjs.org/docs/components-and-props... 2019. 7. 15. Node.js로 Angular6 구축하기 참고 사이트: https://www.devglan.com/angular/angular-6-example Angular 6 Project 생성하기 npm i -g npm@latest ng new angular6-example ng g service service/user ng g service service/auth login, add-user, edir-user, list-user 네 개의 컴포넌트를 차례로 생성해준다. app.js 파일로 서버 연결 require 항목에 있는 express와 CORS는 명령어 npm i 로 수동 설치해주어야 정상 실행 된다. const express = require('express'); const CORS = require('cors')(); localhost:4200.. 2019. 5. 4. [jQuery] form 처리하는 방법 .submit() event 웹 상에서 사용자에게 입력을 받기 위해 form을 사용한다. 제이쿼리에는 폼을 처리하는 몇 가지 이벤트가 있는데, 오늘은 그 중 .submit()에 대해 알아본다. 폼 양식 내 정보 출력 셀렉터로 사용자가 폼에서 입력한 정보를 가져와 원하는 위치를 지정해 다시 뿌려주는 코드를 작성해보았다. $(document).ready(function(){ $("#myForm").submit(function(){ var name = $("#name").val(); $("#inputData").append('' + '이름: '+ name + ''); var email = $("#email").val(); $("#inputData").append('' + '이메일: ' + email + ''); return false; .. 2018. 12. 5. 이전 1 다음
