表格转图片下载

要求将带有二维码的表格转为图片格式下载下来

使用dom-to-image将html转为图片，详细使用方法见官方文档：
dom-to-image

1、生成二维码

这里我是使用QRCode 、html2canvas 插件来生成的二维码
前面有写一篇文章前端生成二维码比较详细的介绍了二维码的生成，这里的代码基本上和之前是一样的

// 二维码
import QRCode from 'qrcode'
import html2canvas from 'html2canvas'

<div v-if="isqrCode" id="poster" class="flex-row" >
  <canvas class="qr" id="qrCode-canvas"></canvas>
</div>

    // 生成二维码
    createQRCode () {
      //先用 QRCode 生成二维码 canvas，然后用 html2canvas 合成整张海报并转成 base64 显示出来
      let canvas = document.getElementById('qrCode-canvas')
      const _this = this
      //  '4'：二维码中的内容，必须是字符串格式字符串格式  
      QRCode.toCanvas(canvas,'4', (error) => {
        if (error) {
          console.log(error)
        } else {
          let canvas = document.getElementById('qrCode-canvas')
          //qrcode 生成的二维码会带有一些默认样式，需要调整下
          canvas.style.width = '100px'
          canvas.style.height = '100px'
          let context = canvas.getContext('2d')
          let poster = document.getElementById('poster')
          html2canvas(poster).then(canvas => {
            _this.dataArr = [
              {
                label:'名称',
                value:'华为'
              },{
                label:'屏幕',
                value:'6.53英寸'
              },{
                label:'电池',
                value:'4000mAh'
              },{
                label:'二维码',
                value:canvas.toDataURL(),
              },
            ]
            _this.posterDataUrl = canvas.toDataURL()       
          }) 
        }
      })
    }

2、将html转为图片并下载

先引入dom-to-image

import domtoimage from 'dom-to-image'

  components: {
    domtoimage
  },

// 下载信息图片
  // 使用dom-to-image将html转为图片并下载
   shotPic(){
     let node = document.getElementById('my-node')
     domtoimage.toJpeg(node).then((dataUrl) => {
       const eleLink = document.createElement("a")
       eleLink.href = dataUrl; // 转换后的图片地址
       eleLink.download = this.dataArr[0].value + "_电脑信息.jpeg"//下载后的照片名字
       document.body.appendChild(eleLink)
       // 触发点击
       eleLink.click()
       // 然后移除
       document.body.removeChild(eleLink)
       this.isqrCode=false
     })
   },

3、完整代码

<template>
  <!-- <div id="pageDiv" :style="{'padding-top':isWeiXin || isApps?'0':'3rem'}"> -->
  <div>
    <el-table id="my-node" v-if="dataArr.length>0" border :data="dataArr" class="tb-sty" style="width: 262px;">
      <el-table-column align="center" width="260"  label="手机信息">
        <el-table-column align="center" prop="label" label="" width="130" />
        <el-table-column align="center" prop="value" label="" width="130" >
          <template slot-scope="scope">
            <img v-if="scope.row.label==='二维码'" :src="scope.row.value" />
            <span v-else>
              {{scope.row.value}}
            </span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <div v-if="isqrCode" id="poster" class="flex-row" >
      <canvas class="qr" id="qrCode-canvas"></canvas>
    </div>
    <el-button class="filter-item" size="mini" type="primary" @click="createQRCode">下载信息图片</el-button>
  </div>
</template>


<script>
import domtoimage from 'dom-to-image'
// 二维码
import QRCode from 'qrcode'
import html2canvas from 'html2canvas'
export default {
  data() {
    return {
      isqrCode:false,
      posterDataUrl:'',
      dataArr:[],
    };
  },
  components: {
    domtoimage
  },
  created() {
    document.title = "domtoimage使用"
    this.isqrCode=true
  },
  methods: {
    // 下载信息图片
    // 使用dom-to-image将html转为图片并下载
    shotPic(){
      let node = document.getElementById('my-node')
      domtoimage.toJpeg(node).then((dataUrl) => {
        const eleLink = document.createElement("a")
        eleLink.href = dataUrl; // 转换后的图片地址
        eleLink.download = this.dataArr[0].value + "_电脑信息.jpeg"//下载后的照片名字
        document.body.appendChild(eleLink)
        // 触发点击
        eleLink.click()
        // 然后移除
        document.body.removeChild(eleLink)
        this.isqrCode=false
      })
    },
    // 生成二维码
    createQRCode () {
      //先用 QRCode 生成二维码 canvas，然后用 html2canvas 合成整张海报并转成 base64 显示出来
      let canvas = document.getElementById('qrCode-canvas')
      const _this = this
      //  '4'：二维码中的内容，必须是字符串格式字符串格式  
      QRCode.toCanvas(canvas,'4', (error) => {
        if (error) {
          console.log(error)
        } else {
          let canvas = document.getElementById('qrCode-canvas')
          //qrcode 生成的二维码会带有一些默认样式，需要调整下
          canvas.style.width = '100px'
          canvas.style.height = '100px'
          let context = canvas.getContext('2d')
          let poster = document.getElementById('poster')
          html2canvas(poster).then(canvas => {
            _this.dataArr = [
              {
                label:'名称',
                value:'华为'
              },{
                label:'屏幕',
                value:'6.53英寸'
              },{
                label:'电池',
                value:'4000mAh'
              },{
                label:'二维码',
                value:canvas.toDataURL(),
              },
            ]
            _this.posterDataUrl = canvas.toDataURL()       
          }) 
        }
      })
       window.setTimeout(()=>{_this.shotPic()},1000) 
    }
  }
}
</script>
 
<style rel="stylesheet/scss" lang="scss" scoped>
.tb-sty{
  border-bottom: 1px solid transparent;
}
 /deep/ .el-table__header-wrapper {
    overflow: hidden;
    height: 40px;
}
.flex-row{
  width: 100px;
}
</style>

4、完成效果