Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- aws m2
- 밸런스 게임
- mongo 4.4.18
- mysql like
- github accesstoken
- mongo 4.4
- index like
- 개발자 면접 팁
- git
- index in
- 인텔리제이 github 로그인
- docker m2
- mysql index 속도차이
- 라즈베리바이4 mongo
- 개발자 취업 준비
- ECS
- 팩토리 패턴 언제
- kubernetes
- 팩토리 패턴 예제
- 개발자 회고록
- 개발자 전직
- 회고록
- 퇴사
- nestjs
- token 탈취
- VUE
- 신입 개발자 면접
- OSI 7계층
- 신입 면접 팁
- 쿠버네티스
Archives
- Today
- Total
주니어 개발자 1호
Vue html2canvas 사용 방법 본문
주 사용 목적
html 을 image로 변환하여 다운할 때 사용
필요 라이브러리
html2canvas ( html to canvas )
다운 방법
npm install --save html2canvas
사용 방법
HTML
!-- 가상의 테이블 , 해당 -->
<!-- 이부분을 해석할 필요는 없고, 가상의 element 라고 생각하면 됩니다! -->
<!-- 하지만 다음행의 id속성은 아래 script에서 쓰입니다! -->
<b-table-simple fixed id='capture'>
<b-thead>
<tr>
<b-th class="th-cell" colspan="1"/>
<b-th class="th-cell" colspan="2" v-for="(item,idx) in 5" :key="`wait1-${idx}`">
<b-skeleton/>
</b-th>
<b-th class="th-cell" colspan="2">
<b-skeleton/>
</b-th>
</tr>
</b-thead>
<b-tbody>
<tr v-for="item in 5" :key="`body ${item}`">
<b-th colspan="1"/>
<b-th colspan="2" v-for="(item,idx) in 5" :key="`wait1-${idx}`">
<b-skeleton/>
</b-th>
<b-th colspan="2">
<b-skeleton/>
</b-th>
</tr>
</b-tbody>
</b-table-simple>
<!-- 클릭 이벤트에 대한것 -->
<button @click="imageDown('capture','table')">다운로드</button>
SCRIPT
⚙ html2canvas(element).then(canvas=> ... )
특정element 를 canvas 로 바꾸어줍니다. ( then의 매개변수가 변환된 canvas )
대표적으로 해당 html을 사진처럼 다운 받을 수 있습니다.
imageDown(tableId: string, fileName: string) {
const tableElement = document.getElementById(tableId);
if (tableElement) {
// html2canvas(element).then(canvas=> ... )
// element 를 then의 canvas 로 바꾸어줍니다.
// 그래서 대표적으로 해당 html을 사진처럼 다운 받을 수 있습니다.
html2canvas(tableElement, {
backgroundColor: '#FFF'
}).then((canvas: HTMLCanvasElement) => {
const imageUrl = canvas.toDataURL('image/png');
// 그림을 다운받기 위한 가상의 a 태그 생성 ( 속성값 지정이후 클릭 )
const downLink = document.createElement('a');
downLink.setAttribute('target', '_blank')
downLink.download = fileName + '.png';
downLink.href = imageUrl;
downLink.click();
})
}
}
'Front 관련' 카테고리의 다른 글
apollo client refetchQueries 분석.. (0) | 2024.08.27 |
---|---|
Vue emit 관련 (0) | 2022.07.20 |
Vue axios 세팅 (0) | 2022.07.20 |