vue项目使用html2canvas实现截图功能

这个截图有点类似下载的那种，可以按照自己的需要在代码中指定要截屏的部分，点击截图会自动保存到本地，更贴切的说法可以说是快照。不同于我们常用的截图软件，这点要注意。实现结果如图：

html2canvas 是 JavaScript 实现页面截图的类库，html2canvas 使你可以直接在用户浏览器上截取网页或部分网页的“屏幕快照”。屏幕截图基于DOM，因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上可用的信息来构建屏幕截图。

具体实现方式如下：
（1）安装 html2canvas

npm install html2canvas --save

（2）将 html2canvas 导入项目

import html2canvas from 'html2canvas'

（3）具体实现代码
HTML

<template><!--点击button即可实现页面的截图--><el-button size="mini" type="primary" plain @click="download">案例导出</el-button><div  ref="faultTree"><!--这里是需要截图的区域--></div>
</template>

js方法

import html2canvas from 'html2canvas'
methods: {// 下载download() {const ref = this.$refs.faultTree // 截图区域html2canvas(ref, { backgroundColor: '#fff' }).then(canvas => {const dataURL = canvas.toDataURL('image/png')this.dataURL = dataURLconst creatDom = document.createElement('a')document.body.appendChild(creatDom)creatDom.href = dataURLcreatDom.download = '导出淘汰案例'creatDom.click()})}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！