vue如何将html内容转为图片并下载到本地
作者:阿wei程序媛
这篇文章主要介绍了vue如何将html内容转为图片并下载到本地,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
将html内容转为图片并下载到本地
需求:将自己写的html内容转化为图片并可以下载到本地
1.安装html2canvas
npm install --save html2canvas
2.在自己所需要的页面进行引入
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 html2canvas
2.对应页面引入该插件
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); },
效果图:
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。