vue中导出html图片

vue中指定html生成图片并下载到本地

仅供自己参考，有误欢迎指正^_^

1、安装依赖

npm i html2canvas

2、引入依赖

import html2canvas from 'html2canvas'

3、注册依赖

components: { html2canvas }

使用：

<div class="codeImgQr" id="codeImgQr">
  <img style="width: 100%;height: 100%;" src="../../../assets/img/downIcon.png" alt="">
</div>
<p class="downLoadImg" @click="downLoadImgFn">下载二维码图片</p>

<script>
	import html2canvas from 'html2canvas'
	export default {
	  name: "index",
	  components: { html2canvas },
	  data() {
	    return {}
	  },
	  methods: {
	    saveBtnFn() {
	      this.saveBtnLoading = true
	    },
	    // 下载二维码图片
	    downLoadImgFn() {
	      this.$nextTick(() => {
	        html2canvas(document.getElementById('codeImgQr'),{
	          scale:3,      // 放大
	          useCORS: true, // 使用CORS从服务器加载图像
	          async: false, // 异步解析和呈现元素
	          background: "#ffffff", // 背景颜色
	          dpi: 300, // 处理模糊问题
	        }).then(canvas => {
	          const img = canvas.toDataURL("image/jpeg").replace("data:image/jpeg;base64,", "")
	          const finalImageSrc = "data:image/jpeg;base64," + img
	          // 添加a标签用于下载
	          const aElem = document.createElement('a')
	          document.body.appendChild(aElem)  // 223kb
	          aElem.href  = finalImageSrc
	          // 图片下载名
	          aElem.download = "自定义图片名称.jpg"
	          aElem.click()
	          document.body.removeChild(aElem)
	        });
	      })
	    }
	  }
  	}
</script>