vue + html2canvas将页面下载为图片

vue + html2canvas将页面下载为图片

首先 先安装html2canvas

npm install html2canvas --save  

页面

<template>
  <div>
   	<button @click="saveImage">下载图片</button>
    <div ref="suibiandeqiming">ceshi</div>
  </div>
</template>

给要打印的标签加上ref

页面引用html2canvas

import html2canvas from 'html2canvas'

点击打印

// 下载图片
    saveImage() {
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      html2canvas(this.$refs.suibiandeqiming, {
        backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, //支持图片跨域
        scale: 1, //设置放大的倍数
      }).then((canvas) => {
        // 把生成的base64位图片上传到服务器,生成在线图片地址
        let url = canvas.toDataURL('image/png') // toDataURL: 图片格式转成 base64
        this.imgUrl = url
        //将图片下载到本地
        let a = document.createElement('a') // 生成一个a元素
        let event = new MouseEvent('click') // 创建一个单击事件
        a.download = '图片名' // 设置图片名称没有设置则为默认
        a.href = this.imgUrl // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      })
    },

完整页面代码

<template>
  <div>
	<button @click="saveImage">下载图片</button>
	<div ref="suibiandeqiming">ceshi</div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
export default {
  data() {
    return {
		imgUrl:'',
	}
  },
  methods: {
    // 下载图片
    saveImage() {
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      html2canvas(this.$refs.suibiandeqiming, {
        backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, //支持图片跨域
        scale: 1, //设置放大的倍数
      }).then((canvas) => {
        // 把生成的base64位图片上传到服务器,生成在线图片地址
        let url = canvas.toDataURL('image/png') // toDataURL: 图片格式转成 base64
        this.imgUrl = url
        //将图片下载到本地
        let a = document.createElement('a') // 生成一个a元素
        let event = new MouseEvent('click') // 创建一个单击事件
        a.download = '图片名' // 设置图片名称没有设置则为默认
        a.href = this.imgUrl // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      })
    },
  },
}
</script>

<style scoped lang="scss">
</style>