做网站赚钱难,专门做娱乐场所的设计网站,手机qq浏览器网页搜索记录删不掉,类似于众人帮的做任务赚佣金网站在新业务需求中#xff0c;碰到这样一个场景#xff0c;需要将后端返回的表格数据#xff0c;保存至本地或者保存至剪切板#xff0c;直接发送给用户使用。
1. 将内容转换成图片并保存至本地
1.1 交互效果 如图所示#xff0c;想要点击复制按钮后#xff0c;将下面这个…在新业务需求中碰到这样一个场景需要将后端返回的表格数据保存至本地或者保存至剪切板直接发送给用户使用。
1. 将内容转换成图片并保存至本地
1.1 交互效果 如图所示想要点击复制按钮后将下面这个图标转换成图片的形式并保存至本地
1.2 实现代码
下载插件库 yarn add html2canvas file-saver
html 页面设置
el-button typesuccess sizemini clickcopyCharts复制下面列表内容/el-buttonel-tableidsavethepage......
/tablejs 实现逻辑
import html2canvas from html2canvas
import { saveAs } from file-saverasync 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 typesuccess sizemini clickcopyCharts复制下面列表内容/el-buttonel-tableidsavethepage......
/tablejs 逻辑
import html2canvas from html2canvasasync 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格式图片分辨率为96dpiencoderOptions范围 0~1用来选定图片的质量默认0.92超出范围会自动被设置成默认值返回值是一个数据url是base64组成的图片的源数据、可以直接赋值给图片的src属性。
3.3 Navigator.clipboard
剪贴板 Clipboard API 为 Navigator 接口添加了只读属性 clipboard该属性返回一个可以读写剪切板内容的 Clipboard 对象。在 Web 应用中剪切板 API 可用于实现剪切、复制、粘贴的功能。
如果有用点个赞呗~
总结用法希望可以帮助到你 我是Ably你无须超越谁只要超越昨天的自己就好~
