> Frontend/JS
-
TIL-2024.03.13 - JS - 엑셀 다운로드 (Excel Download in Vue)> Frontend/JS 2024. 3. 13. 11:15
목표: 버튼을 클릭 시, 저장된 값을 엑셀로 다운로드 하는 기능 1. yarn add xlsx 를 통한 외부 라이브러리 다운로드 (버전 0.18.5) yarn add xlsx@0.18.5 2. template에 button tag 생성하고, fnDownloadExcel를 바인딩 ... 중략 ... 다운로드 ... 중략 ... 3. Script Setup에 fnDownloadExcel , fnExtractProperties 등을 작성 4. 결과
-
TIL-2024.02.08 - URL로 이미지 원본 사이즈 구하기> Frontend/JS 2024. 2. 8. 16:45
// API 를 통해 가지고 온 이미지 URL의 원본 사이즈 return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => { resolve({width: img.naturalWidth, height: img.naturalHeight}); }; img.onerror = reject; img.src = fileUrl; }); > 02/07의 문제에서, scale를 사용할 경우, 원본 사이즈의 크기를 구해, img 태그의 width, height를 나눠서 scale 적용
-
TIL-2024.02.07 - 이미지에 원 그리기> Frontend/JS 2024. 2. 7. 23:28
이미지에서 마우스 클릭 이벤트가 발생한 경우, 해당 부위에 원 그리는 함수 // 이미지 위에 사용자 클릭 위치에 마커를 생성하는 함수 정의 const createClickMarker = (positionX, positionY) => { const markerElement = document.createElement("div"); markerElement.style.position = "absolute"; markerElement.style.left = `${positionX}px`; markerElement.style.top = `${positionY}px`; markerElement.style.width = "10px"; markerElement.style.height = "10px"; markerEl..