vue项目中使用html2canvas解决截图不全的问题
作者：吃葡萄不吐葡萄皮嘻嘻
本文主要介绍了vue项目中使用html2canvas解决截图不全的问题
话不多说，直接上代码！！！
一、安装插件
npm i html2canvas --save
二、页面引入插件
import html2canvas from "html2canvas";
<div>
<el-button @click="downloadPicture">下载</el-button>
<div ref="imageDom">
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column prop="age" label="年龄"> </el-table-column>
</el-table>
</div>
</div>
页面效果图展示（有横向和纵向的滚动条）：
重点思路：
首先是获取要截取页面的父元素，通过clone并紧随于body之后，在生成幕布的时候不再拿着父元素去截取，而是截取clone的div，这样的话就可以实现整个页面的截取了
//截图
downloadPicture () {
var width = this.$refs.imageDom.style.width
var cloneDom = this.$refs.imageDom.cloneNode(true)
cloneDom.style.position = 'absolute'
cloneDom.style.top = '0px'
cloneDom.style.zIndex = '-1'
cloneDom.style.width = width
document.body.appendChild(cloneDom)
html2canvas(cloneDom).then(canvas => {
// 转成图片，生成图片地址
var imgUrl = canvas.toDataURL('image/png')
var eleLink = document.createElement('a')
eleLink.href = imgUrl // 转换后的图片地址
eleLink.download = 'pictureName'
// 触发点击
document.body.appendChild(eleLink)
eleLink.click()
// 然后移除
document.body.removeChild(eleLink)
})
cloneDom.style.display = 'none'
},
下载一键截屏效果图展示如下（完美展示～～）：
!!!注意：以上代码没有设置table高度和列固定，如果table设置了高度或者设置了列固定会出现截图不全的问题，此时需要动态的给table设置高度和列固定， 不设置高度的时候高度设置为空值才生效，设置为none、auto、100%不生效
所有代码如下：
<template>
<div ref="imageDom" >
<el-button @click="downloadPicture">下载</el-button>
<div >
<el-table
class="tableX"
:height="flag ? '400' : ''"
:data="tableData"
:row-class-name="tableRowClassName"
>
<el-table-column :fixed="flag?true:false" prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
<el-table-column prop="age" label="年龄"> </el-table-column>
<el-table-column prop="sex" label="性别"> </el-table-column>
<el-table-column prop="hobby" label="爱好"> </el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import html2canvas from "html2canvas";
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "开始",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海",
age: 30,sex:'女',hobby:'爱好'
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海",
age: 30,sex:'女',hobby:'爱好'
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海",
age: 30,sex:'女',hobby:'爱好'
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海",
age: 30,sex:'女',hobby:'爱好'
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海",
age: 30,sex:'女',hobby:'爱好'
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海",
age: 30,sex:'女',hobby:'爱好'
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海",
age: 30,sex:'女',hobby:'爱好'
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海",
age: 30,sex:'女',hobby:'爱好'
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海",
age: 30,sex:'女',hobby:'爱好'
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海",
age: 30,sex:'女',hobby:'爱好'
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海",
age: 30,sex:'女',hobby:'爱好'
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海",
age: 30,sex:'女',hobby:'爱好'
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海",
age: 30,sex:'女',hobby:'爱好'
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海",
age: 30,sex:'女',hobby:'爱好'
},
{
date: "2016-05-03",
name: "王小虎",
address: "结尾",
},
],
h: 400,
flag: true,
};
},
methods: {
tableRowClassName({ rowIndex }) {
if (rowIndex % 2 === 0) {
return "warning-row";
} else if (rowIndex % 2 !== 0) {
return "success-row";
}
return "";
},
//截图
downloadPicture() {
this.flag = false;
this.$nextTick(() => {
var width = this.$refs.imageDom.style.width;
var cloneDom = this.$refs.imageDom.cloneNode(true);
cloneDom.style.position = "absolute";
cloneDom.style.top = "0px";
cloneDom.style.zIndex = "-1";
cloneDom.style.width = width;
console.log(cloneDom);
document.body.appendChild(cloneDom);
html2canvas(cloneDom).then((canvas) => {
// 转成图片，生成图片地址
var imgUrl = canvas.toDataURL("image/png");
var eleLink = document.createElement("a");
eleLink.href = imgUrl; // 转换后的图片地址
eleLink.download = "pictureName";
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
});
cloneDom.style.display = "none";
this.flag = true;
});
},
},
};
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
到此这篇关于vue项目中使用html2canvas解决截图不全的问题的文章就介绍到这了,更多相关vue html2canvas截图不全内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！