242.[vue]vue中将html页面转为图片并且下载该图片

[webVueBlog]

1.下载 html2canvas

npm install html2canvas

2.对应页面引入该插件

import html2canvas from 'html2canvas';

toImage() {
 html2canvas(this.$refs.imageDom, {
 backgroundColor: '#ffffff'
 }).then(canvas => {
 var imgData = canvas.toDataURL("image/jpeg");
 this.fileDownload(imgData);
 })
},
fileDownload(downloadUrl) {
 let aLink = document.createElement("a");
 aLink.style.display = "none";
 aLink.href = downloadUrl;
 aLink.download = "监控详情.png";
 // 触发点击-然后移除
 document.body.appendChild(aLink);
 aLink.click();
 document.body.removeChild(aLink);
},

<template>
	<div>
		<div class="container" ref="imageDom">hahahah</div>
		<button @click="toImage">导出</button>
	</div>
</template>

import html2canvas from 'html2canvas';

npm install html2canvas