使用html2canvas实现截图下载

前端技术发表留言

场景

有时候我们会将我们的网页保存为截图，供离线观看和传播。相对于直接保存一个网页，图片有着不易修改，单独文件的好处，所以实现网页的截图还是还有必要的。

方案

经过在网上找一些插件，其中html2canvas插件用的人比较多，比较好的还有dom-to-image，这两个插件都可以实现网页的截图生成canvas功能。此处就以html2canvas为例记录一下笔记。

这两个插件都提供了npm包，所以可以直接使用npm下载。

npm install html2canvas -S

主要的流程是：

html2canvas实现dom转canvas => canvas转成base64 => 使用a标签的download属性实现下载功能。

实现

先来一段html2canvas转canvas的代码（支持Promise），详细的文档可以看下：http://html2canvas.hertzen.com/

// http://html2canvas.hertzen.com/documentation   这个是详细的文档
// 下面的this.content是一个dom节点
html2canvas(this.content)
.then(canvas => {
  // 生成的canvas可以转成base64
})
.catch(error => {
  // 截图出错了我们要做的事情
})

然后我们使用生成的canvas来实现下载功能

const url = canvas.toDataURL('image/png');
// 先构建一个a标签
const link = document.createElement('a');
// 设置要下载的内容
link.href = url;
// 设置下载文件名称
link.download = "screenshot.png";
document.body.appendChild(a);
//  模拟点击了a链接
link.click();
document.body.removeChild(a);

下面是完整的代码：

html2canvas(this.content)
    .then(canvas => {
      // 生成的canvas可以转成base64
      const url = canvas.toDataURL('image/png');
      // 先构建一个a标签
      const link = document.createElement('a');
      // 设置要下载的内容
      link.href = url;
      // 设置下载文件名称
      link.download = "screenshot.png";
      document.body.appendChild(a);
      // 模拟点击了a链接
      link.click();
      document.body.removeChild(a)
    })
    .catch(error => {
      // 截图出错了我们要做的事情
      alert('你的浏览器可能不支持canvas啊');
    })

因为iOS上所有的浏览器都不支持a标签的download属性，所以没有办法下载。目前测试没有问题的浏览器：

Mac系统：

1、Firefox 60.0.1
2、Chrome 66.0
3、Safari 11.1

已知问题

可是我使用不当吧，有解决方案的同学可以联系我：

  1. 就是发现截图的时候，如果有img或者是background有http://这种的就会导致图片丢失，我是直接把图片转成base64实现的，这样会导致文件有点大。（后面发现原因了，是因为图片的跨域的问题，需要设置CORS：https://www.cnblogs.com/padding1015/p/8947098.html）
  2. 还有一个就是a标签 download 属性会在有些浏览器上不支持修改文件名称，在国内的QQ浏览器上还会下载失败，暂时也没有找到解决方案。（不支持修改文件名称也是跨域的问题，如果是同一个域就可以修改文件名）

‍

留下回复