将html内容转为图片并下载到本地
需求：将自己写的html内容转化为图片并可以下载到本地
1.安装html2canvas
npm install --save html2canvas2.在自己所需要的页面进行引入
import html2canvas from "html2canvas";3.html
<div class="popuptop" id="img">
<div class="pupupbg">
内容内容内容
</div>
</div>
<div class="weixin" @click="downimg">
<div class="weixinlogo" >
<img src="../../assets/images/mypage/down.png">
<p class="weixinshare" >下载</p>
</div>
</div>
<a id="downimg" href="" style=" rel="external nofollow" display:none"></a>4.JS
//下载图片
let downimg= ()=>{
setTimeout(()=>{
proxy.$nextTick(()=>{
html2canvas(document.querySelector('#img'),{
useCORS: true
}).then(canvas => {
var url = canvas.toDataURL() //把canvas转成base64
// 写一个隐藏的按标签，借助按标签的download属性下载图片
document.querySelector('#downimg').href = url
document.querySelector('#downimg').download = "我的持仓报告.png"
document.querySelector('#downimg').click()
})
})
},2000)
}以上代码就能实现将html内容转为图片并下载到本地。
vue将html页面转为图片并且下载该图片
1.下载 html2canvas
npm install html2canvas2.对应页面引入该插件
import html2canvas from 'html2canvas';3.具体用法 （要element使用带有一些（可选）选项的 html2canvas 呈现，只需调用html2canvas(element, options);）
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});4.转为图片并且下载
<template>
<div>
<div class="container" ref="imageDom">hahahah</div>
<button @click="toImage">导出</button>
</div>
</template>在methods方法中：
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);
},效果图：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
