Vue專案中使用html2canvas生成頁面截圖

1. 引入html2canvas

npm install html2canvas

2. html部分

<template>
  <div>
    <div class="html2canvas" ref="html2canvas">
      <div class="content">這裡是要擷取內容的部分</div>
    </div>
    <img :src="imgUrl" />
  </div>
</template>

3. css部分

.content {
  width: 200px;
  height: 200px;
  background-color: pink;
}

4. js部分

import html2canvas from 'html2canvas'

export default {
  data () {
    return {
      imgUrl: ''
    }
  },
  mounted () { 
    this.toImage()
  },
  methods: {
    toImage () {
      html2canvas(this.$refs.html2canvas, {
        width: 200,
        height: 200,
        backgroundColor: null,
        useCORS: true // 解決檔案跨域問題
      }).then(canvas => {
        const url = canvas.toDataURL('image/png') // 生成的圖片
        // 可以上傳後端或者直接顯示
        this.imgUrl = url
      })   
    }
  }
}

5. 效果圖