Vue 实现页面一键截屏功能
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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“,需要截取掉,否则保存的图片无法打开。
GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)