vue项目中使用html2canvas解决截图不全的问题

更新时间：2023年11月24日 10:38:07 作者：吃葡萄不吐葡萄皮嘻嘻

本文主要介绍了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截图不全内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue 组件prop验证作用示例解析
这篇文章主要为大家介绍了vue组件prop验证作用示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
Vue常用的全选/反选的示例代码
这篇文章主要介绍了Vue常用的全选/反选的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
详解让sublime text3支持Vue语法高亮显示的示例
本篇文章主要介绍了让sublime text3支持Vue语法高亮显示的示例，非常具有实用价值，需要的朋友可以参考下
2017-09-09
vue中使用Echarts map图实现下钻至县级的思路详解
这篇文章主要介绍了vue中使用Echarts map图实现下钻至县级,需要注意的是，因为我是直接从 vue-cli2 直接跳到 vue-cli4 ，还奇怪怎么读取不到JSON，查找后才知道 vue-cli3 往后的项目基础架构对比旧版本有些区别，感兴趣的朋友跟随小编一起看看吧
2022-01-01
详解vue-router 命名路由和命名视图
这篇文章主要介绍了详解vue-router 命名路由和命名视图,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
完美解决通过IP地址访问VUE项目的问题
这篇文章主要介绍了完美解决通过IP地址访问VUE项目的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue状态管理工具Vuex工作原理解析
Vuex是一个专为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于Vue中状态管理器(vuex)详解以及实际应用场景的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
element step组件在另一侧加时间轴显示
本文主要介绍了element step组件在另一侧加时间轴显示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
vue转react入门指南
因为新公司使用react技术栈，包括Umi、Dva、Ant-design等一系列解决方案。本文就简单的介绍一下vue转react入门指南，感兴趣的可以了解一下
2021-10-10
Vue中从template到jsx语法教程示例
这篇文章主要为大家介绍了Vue中从template到jsx语法教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10