将页面中某一块内容下载为图片

前言

在vue项目中，想要将一块内容下载成为图片，可以使用html2canvas将页面中的某一块内容转化为图片，并提供下载链接让用户下载。

一、步骤

1. 安装 html2canvas

npm install html2canvas --save

2. 在 Vue 组件中引入 html2canvas

在需要使用 html2canvas 的组件中，可以使用 import 语句引入 html2canvas

import html2canvas from 'html2canvas'

3. 使用 html2canvas 将目标元素转换为图片

 监听点击事件，当用户点击下载按钮时，使用 html2canvas 将目标元素转为图片并提供下载链接

downloadQRCode() {
    let imgName = document.querySelector('.left .deviceName').innerHTML
	const targetElement = document.querySelector('.card')
    // 将目标元素转为图片
	html2canvas(targetElement)
		.then(canvas => {
            // 创建下载链接
			const link = document.createElement('a')
			link.download = `${imgName}.jpg`
			link.href = canvas.toDataURL()
            // 点击下载链接进行下载
			link.click()
		})
},