Vue实现截屏下载

使用的是html2canvas

官方网站： html2canvas.hertzen.com/

主要位置：

• class名称，该参数传入dom节点就会对其位置进行截图（无法对画笔生成部分截屏）
• 文件名称，自定义的文件名称

例子：

npm install --save html2canvas

import html2canvas from 'html2canvas'
export default {
	methods:{
		 downLoad () {
	      const $this = this
	      html2canvas(document.getElementsByClassName('class名称')[0]).then(function (canvas) {
	        let imageurl = canvas.toDataURL('image/png')
	        let imagename = '文件名称'
	        $this.fileDownload(imageurl, imagename)
	      })
	    },
	    //下载截屏图片
	    fileDownload (downloadUrl, downloadName) {
	      let aLink = document.createElement('a')
	      aLink.style.display = 'none'
	      aLink.href = downloadUrl
	      aLink.download = `${downloadName}.jpg`
	      // 触发点击-然后移除
	      document.body.appendChild(aLink)
	      aLink.click()
	      document.body.removeChild(aLink)
	    }
	}
}