JavaScript实现网页截图导出方案

dom-to-image

优点

• 实现简单，可下载后自行改动源码
• 还原度良好，尤其chrome支持非常好

缺点

• safari支持不是很好，不过一些问题可以解决(canvas节点会导出空白，如果使用绘图引擎的话，建议转化成svg引擎绘图)
• ie,edge 无法使用

基本能支持业务需求

后端截图

优点

• 真实截图，终极方案，无兼容问题

缺点

• 实现流程稍微繁琐
• 需要考虑 用户权限认证问题

导出实现

导出也就是下载文件到本地

a标签

原理是通过a标签的download属性实现下载。

• // 基本使用
• <a href=“/images/xxxxx.jpg” download=“filename”>
•  
• // 脚本触发
• const download = (filename, url) => {
• let a = document.createElement(‘a’);
• a.style = ‘display: none’; // 创建一个隐藏的a标签
• a.download = filename;
• a.href = url;
• document.body.appendChild(a);
• a.click(); // 触发a标签的click事件
• document.body.removeChild(a);
• }

blob文件流对象

这个需要服务端支持，发起请求，服务端返回数据流，然后前端触发下载。
具体就不多说了，网上有很多文章