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

最低0.47元/天 解锁文章


被折叠的 条评论
为什么被折叠?



