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();
      })
    }
  }