vue中将写的页面变成图片进行下载

在浏览器中将写的页面变成图片进行下载使用canvas，首先需要安装html2canvas

官网：  html2canvas - Screenshots with JavaScript (hertzen.com)

安装

pnpm add html2canvas

html代码 

<div>
     <el-button type="primary" @click="downLoad()">图片下载</el-button>
</div>

引入

import html2canvas from 'html2canvas'

js代码  

downLoad(){
     html2canvas(document.body).then(canvas =>{
         const link = document.createElement('a')
         const event = new MouseEvent('click')
         link.download = '下载.png'
         link.href = canvas.toDataURL()
         link.dispatchEvent(event)
     })
}