vue使用html2canvas将DOM转化为图片

1.安装项目依赖html2canvas

npm install html2canvas --save

2.在使用的页面引入

import html2canvas from 'html2canvas';

3.使用

<template>
  <div>   
  	<div style="overflow:hidden">
      <i-button type="primary" @click='toImage'> 下载图片</i-button>
    </div>
    <div ref="addImage">
      <div ref="capture">
      //需要转为图片的html内容
      //start //列如 表格转图片
        <Table border
               :columns="columns"
               :data="products"
               class="membershipTable">
        </Table>
        //end
      </div>
    </div>
  </div>
</template>
<script>
import html2canvas from 'html2canvas';
export default {
  data () {
    return {
      tableData: [],
      columns: [
        
      ],
      imgUrl: ''
    }
  },
  methods: {
    //点击生成图片
    toImage () {
      html2canvas(this.$refs.capture,{
        backgroundColor: null
    }).then(canvas => {
    	//获取图片base64地址,如果想要展示图片即可直接展示
        // let dataURL = canvas.toDataURL("image/png");
        // this.imgUrl = dataURL;
        
        
        //创建一个a标签，直接下载生成的图片
        let link = document.createElement("a");
        link.href = canvas.toDataURL();
        link.setAttribute("download", "定制发货单详情.png");
        link.style.display = "none";
        document.body.appendChild(link);
        link.click();
      });
    },
  },
  created () {
    

  },
  mounted () {

  },
  
}
</script>
<style lang="scss" scoped>

</style>