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

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

1.1 交互效果

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

1.2 实现代码

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

html 页面设置

<el-button type="success" size="mini" @click="copyCharts">复制下面列表内容</el-button><el-tableid="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-tableid="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)}}

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，你无须超越谁，只要超越昨天的自己就好~