在vue项目中使用html2canvas截图（固定区域截图）

1.项目目录下，打开dos窗口使用cnpm安装html2canvas插件。

cnpm isntall html2canvas

2.在使用html2canvas的页面中，引入插件。

import html2canvas from 'html2canvas'

3.先设置截图按钮，然后设置需要截图的div标签的ref。

<el-button @click="screenShot()">截图</el-button>

<div ref="screen"><p>html2canvas截图</p><p>html2canvas截图</p><p>html2canvas截图</p><p>html2canvas截图</p><p>html2canvas截图</p>
</div>

4.截图并下载图片到本地

//截屏
screenShot () {　html2canvas(this.$refs.screen, {backgroundColor: '#FFFFFF',useCORS: true}).then((canvas) => {if (navigator.msSaveBlob) { // IE10+ let blob = canvas.msToBlob(); return navigator.msSaveBlob(blob, name); } else {let imageurl = canvas.toDataURL('image/png')//这里需要自己选择命名规则let imagename = ""this.fileDownload(imageurl, imagename)}})
},
//下载截屏图片
fileDownload(downloadUrl, downloadName) {let aLink = document.createElement("a");aLink.style.display = "none";aLink.href = downloadUrl;aLink.download = `${downloadName}.jpg`;// 触发点击-然后移除document.body.appendChild(aLink);aLink.click();document.body.removeChild(aLink);
}

如果按照上述没有出错的话，在网页上截图就大功告成啦！下面是html2canvas的官方文档，英语大神可以看一下。
html2canvas文档

在vue项目中使用html2canvas截图（固定区域截图）相关推荐

canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
html2pdf vue,VUE项目中利用html2canvas和JsPdf实现页面转PDF并保证图片不会被切断
1.安装html2canvas和JsPdf //第一个.将页面html转换成图片 npm install --save html2canvas //第二个.将图片生成pdf npm install j ...
在vue项目中使用html2canvas实现保存网页为图片
下载内容:npm install --save html2canvas <div ref="mine"> 这里是要截图的部分</div> <butt ...
vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
vue项目中table表格固定表头和首尾列
在html中实现table表格固定表头和首尾列的方法和文章很多,本文就不再赘述. 本文主要介绍vue项目中三种情景下实现table表格固定表头和首尾列情景一:vue+element 只要在el-ta ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
怎么改vue项目的标题_如何动态修改Vue项目中的页面title
前言:在项目中,我们有时候需要修改Vue项目中的页面title. 方法有两种,①如果需要动态设置页面的title,可以直接使用document.title:②可以使用router的beforeEach ...
vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
Vue项目中750设计稿px自动转化成rem方法（小白一个，记录自己遇到的小白问题，大家勿怪）
一.首先下载 postcss-pxtorem 运行npm install postcss-pxtorem 完成下载之后,在package.json文件中添加这段代码 "postcss&quo ...

在vue项目中使用html2canvas截图（固定区域截图）

在vue项目中使用html2canvas截图（固定区域截图）相关推荐

最新文章

热门文章