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文件流对象

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

这里推荐几个封装好的下载文件库
downloadjs

file-saver20210307212655

 

 

 
THE END