vue使用html2canvas将DOM转化为图片_html2canvasdom转图片英文竖着排列-CSDN博客

本文链接：https://blog.csdn.net/weixin_43839119/article/details/106766318

本文介绍如何在Vue项目中利用html2canvas库将DOM元素转换成图片并下载。首先需要安装html2canvas依赖，然后在所需页面引入库，最后通过html2canvas方法捕获指定DOM元素并生成图片，提供示例代码展示具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>