삽질블로그 삽질블로그

현재 사용자 프로세스가 세로모드로만 가능하도록 하는 모바일웹을 만들고 있다. 라이브러리는 vue를 사용중이다. * 최종 소스 (모든 브라우저, 기종에 전부 지원되는 버전) timeout을 넣은 이유는 회전이 되기 전에 이벤트가 실행되어 가로모드, 세로모드를 반대로 읽어오는 경우가 있었음 window.addEventListener( "orientationchange", function() { setTimeout( function() { vueObj.currentOrientation(); }, 200 ) } ) function currentOrientation () { this.$store.state.isVertical = ( window.innerHeight > window.innerWidth ); } -..

typone.com/file/mars_pro_manual.pdf 키보드 불빛 설정방법 : fn + end 키, fn + 화살표키

처음에 span 태그에 있는 내용을 button 클릭 시 복사되도록 하려고 시도했는데 자꾸 실패했다. 실패한 코드 let obj = document.getElementById("kyb-link"); obj.select(); document.execCommand("copy"); obj.setSelectionRange( 0, 0 ); value를 넣을 수 있는 input text나 textarea로 해야한다고 한다. 그래서 요소 생성 후 삭제하는 방법으로 ! // 글을 쓸 수 있는 란을 만든다. var aux = document.createElement("input"); // 지정된 요소의 값을 할당 한다. aux.setAttribute("value", document.getElementById("kyb-l..

ctrl + R : replace all ctrl + F : find ctrl + Y : 한줄 삭제 ctrl + D : 해당줄 복사 shift+shift : 모든항목 검색상자 ctrl + shift + F : 선택한 폴더 내 검색 ctrl + R : replace, replace all

vue에서는 라우터를 이용하여 페이지 이동이 일어난다. 1. html 소스 내에서 페이지 이동 소스코드 2. html에서 goDetail을 호출하고, javascript에서 라우터에 파라미터까지 태워서 페이지 이동시키기 ( 리스트에서 상세페이지로 가는 경우 id를 파라미터로 들고가는 경우가 많음 ) export default { name: "SubmissionTable", methods: { goDetail( item ) { // 여기서 name은 라우터에 정의된 라우트명 //내 소스는 멀티페이지라서 페이지 단위가 컴포넌트임 this.$router.push({ name: 'submission-detail', params: {id: item.submission_id, email: item.email}});..

html2pdf 구현 중 많은 문제를 직면했다. 그 중 알고는 있지만 외면하고 있던 문제들을 결국 지적받았다 ㅎㅎ ※ 두가지 문제 1. pdf left에 margin이 생김 (사실 편법으로 right에도 margin을 주는 방법으로 처리를 해놨는데 이로 인해 2번 문제가 생김) 2. pdf 왼쪽 라인들이 흐릿하게 보임 ※ 원인 canvas로 변경 시 html의 Xscroll (가로 scoll)까지 인식하여 생기는 문제 ※ 해결 편법인지 모르겠지만 scroll을 hide 처리 한 다음 pdf 다운로드 후 다시 scroll을 보이게 처리 기존 html2pdf 옵션 - scroll로 인해 밀리는만큼 margin을 넣어줘 임의로 처리 let opt = { pagebreak: 'css', margin: [0,0,..

※ 객체 내에 객체 형태의 데이터를 배열 내 객체 형태로 변환하는 방법 ※ var objectData = { "object1": {"value": "값1", "name": "이름1" }, "object2": {"value": "값2", "name" : "이름2"} }; const arrayOfObj = Object.entries(objectData).map((e) => ( { [e[0]]: e[1] } )); console.log( arrayOfObj ); 출처 : stackoverflow.com/questions/26795643/how-to-convert-object-containing-objects-into-array-of-objects * vue에서 json 파일 불러오기 - 매우 쉬워서 따로 게시..

오늘은 목표 html to pdf in vuejs --> pdf 다운로드 버튼 클릭 시 html에 출력되어 있는 내용을 그대로 pdf에서 출력하기 총 3단계의 시행착오를 걸쳐 완성했다. 3단계 전부 있으니 급하다면 마지막코드로.. "vue html to pdf" 라고 구글에 검색하면 가장 먼저 나오고 사용량이 가장 많은 vue-html2pdf plugin을 사용하려다가 몇시간의 시도 끝에 실패했다. demo의 component 구조가 약간 복잡하다. 뭐 쉽다면 쉽지만 단시간에 단순구조로 pdf로 다운로드 할 수 있도록 하는 것이 목표였다. 원래 vue-html2pdf도 html2canvas와 jsPDF 기반으로 만들어져있어 vue-html2pdf 말고 본래의 html2pdf을 사용하기로 결정했다. ※ 참..