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

2024-01-03 19:22:30

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

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

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

文章来源:https://blog.csdn.net/weixin_44593720/article/details/135358357
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。