将DOM结构转换成图片保存至本地或保存至剪切板

在新业务需求中，碰到这样一个场景，需要将后端返回的表格数据，保存至本地或者保存至剪切板，直接发送给用户使用。

1. 将内容转换成图片并保存至本地

1.1 交互效果

如图所示，想要点击复制按钮后，将下面这个图标转换成图片的形式，并保存至本地

1.2 实现代码

• 下载插件库： yarn add html2canvas file-saver

html 页面设置

复制下面列表内容


...

js 实现逻辑

import html2canvas from 'html2canvas'
import { saveAs } from 'file-saver'

async copyCharts() {
    const element: any = document.querySelector('#savethepage')
    try {
      const canvas = await html2canvas(element)
      const imgUrl = canvas.toDataURL('image/png')
      const blob = await fetch(imgUrl).then(res => res.blob())
      saveAs(blob, 'screenshot.png')
    } catch (error) {
      console.error('Error:', error)
    }

	// 为确保操作，也可以使用让用户点击一下图表在进行保存，相当于一次内部才知道的确认操作
    // element.addEventListener('click', async () => {
    //   try {
    //     const canvas = await html2canvas(element);
    //     const imgUrl = canvas.toDataURL('image/png');
    //     const blob = await fetch(imgUrl).then(res => res.blob());
    //     saveAs(blob, 'screenshot.png');
    //   } catch (error) {
    //     console.error('Error:', error);
    //   }
    // });
  }

2. 将页面内容转换成图片并复制到剪切板

2.1 交互效果

如图所示，想要点击复制按钮后，将下面这个图标转换成图片的形式，并复制到剪切板，当使用粘贴功能时，可以通过Command + V的形式直接粘贴出该图片

2.2 实现代码

html 页面设置

复制下面列表内容


...

js 逻辑

import html2canvas from 'html2canvas'

async copyCharts() {
    const element: any = document.querySelector('#savethepage')
    try {
      const canvas = await html2canvas(element)
      console.log(canvas, '生成canvas对象')
      const imgUrl = canvas.toDataURL('image/png')
      const blob = await fetch(imgUrl).then(res => res.blob())
      await navigator.clipboard.write([
        new ClipboardItem({
          ['image/png']: blob
        })
      ])
    } catch (error) {
      console.error('Error:', error)
    }
  }

3. 实现逻辑及API使用

上述实现方式

• 我们先是通过 html2canvas 将DOM元素转换成canvas画布
• 之后使用canvas.toDataURL将canvas转换成base64图片地址
• 再生成图片的blob信息
• 通过blob信息进行图片保存至本地saveAs或剪切板navigator.clipboard.write

3.1 html2canvas

• html2canvas是一款开源的JavaScript库，用于将HTML页面渲染成一个Canvas元素，可以将整个页面或者特定的DOM元素转换为图片。可以使用它生成图片，用于分享等功能。
• 这种图片是根据DOM来的，我们可以将特定的DOM元素获取到，之后通过该API的处理，变成一张canvas画布

3.2 canvas.toDataURL

canvas.toDataURL(type, encoderOptions);

• type：生成图片类型，默认是PNG格式，图片分辨率为96dpi
• encoderOptions：范围 0~1，用来选定图片的质量，默认0.92，超出范围会自动被设置成默认值
• 返回值是一个数据url，是base64组成的图片的源数据、可以直接赋值给图片的src属性。

3.3 Navigator.clipboard

剪贴板 Clipboard API 为 Navigator 接口添加了只读属性 clipboard，该属性返回一个可以读写剪切板内容的 Clipboard 对象。在 Web 应用中，剪切板 API 可用于实现剪切、复制、粘贴的功能。

如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~