Vue 实现页面一键截屏功能
Vue 实现页面一键截屏功能1,安装所需要的包:npm i html2canvas --save//将页面内容区域转化为图片格式2,在你的页面引入html2canvas 组件import html2canvas from 'html2canvas'3,定义点击按钮和截屏方法:<div style="color:#fff"><div class="icon-button right
·
1,安装所需要的包:
npm i html2canvas --save //将页面内容区域转化为图片格式
2,在你的页面引入html2canvas 组件
import html2canvas from 'html2canvas'
3,定义点击按钮和截屏方法:
<div style="color:#fff">
<div class="icon-button right">
<!--截屏按钮图标-->
<span class="iconfont icon-iconcut" @click="screenShot"></span>
</div>
</div>
//截图
screenShot() {
//获取页面dom
//这里的html标签是获取页面最大的dom元素;根据实际业务场景自行更改
const el = document.querySelector('html');
html2canvas(el, {allowTaint: true}).then((canvas)=> {
//document.body.appendChild(canvas) 页面布局会乱
//转换base64
const capture = canvas.toDataURL('image/png');
//下载浏览器弹出下载信息的属性
const saveInfo = {
//导出文件格式自己定义,我这里用的是时间作为文件名
'download': Moment().format("YYYY-MM-DD HH:mm:ss")+`.png`,
'href': capture
};
//下载,浏览器弹出下载文件提示
this.downloadFile(saveInfo);
//调用保存接口 如果需要后台保存,放开注释
/* uploadImage({capture:capture}).then(res => {
if (res.code == 200) {
this.$message.success("截取成功!")
}
});*/
})
},
//下载截图
downloadFile(saveInfo) {
const element = document.createElement('a');
element.style.display = 'none';
for (const key in saveInfo) {
element.setAttribute(key, saveInfo[key]);
}
document.body.appendChild(element);
element.click();
setTimeout(() => {
document.body.removeChild(element);
}, 300)
}
这是纯前端截屏,保存文件以下载的方法是方式展现,文件保存位置由浏览器设置;
如果需要后端来控制保存位置需要调用保存接口,接口如下:
4,后代接口
@PostMapping(value = "/uploadImage", produces = {MediaType.APPLICATION_JSON_UTF8_VALUE})
@ApiOperation(value = "保存截屏", notes = "保存截屏")
@ResponseBody
public Object uploadImage(@RequestBody String jsonStr) {
//获取前端传送base64文件
String capture = JSONUtil.parseObj(jsonStr).getStr("capture");
//截掉data:image/png;base64
String base64 = capture.substring(capture.indexOf(",") + 1);
//保存路径
String path = "~/Desktop/截屏/" + DateUtil.format(new Date(), "yyyy.MM.dd_HH.mm.ss") + ".png";
//转换保存
ImgUtil.write(ImgUtil.toImage(base64), FileUtil.file(path));
logger.info("-----------------截屏图片保存位置---------------------------:" + path);
return setSuccessModelMap();
}
注意:base64字符串偏大,用json对象传;当然方法有很多种;
base64字符串文件包含头部“data:image/png;base64“,需要截取掉,否则保存的图片无法打开。
更多推荐
已为社区贡献1条内容
所有评论(0)