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

news2024/10/5 15:34:44

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

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

1.1 交互效果

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

1.2 实现代码

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

html 页面设置

<el-button type="success" size="mini" @click="copyCharts">复制下面列表内容</el-button>

<el-table
	id="savethepage"
	...
>
...
</table>

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 页面设置

<el-button type="success" size="mini" @click="copyCharts">复制下面列表内容</el-button>

<el-table
	id="savethepage"
	...
>
...
</table>

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)
    }
  }