Vue html2canvas 截图(echart可视区域)和 table (全部)并下载

首先安装

npm install html2canvas --save

 

然后在slot里面显示DOM内容,然后点击click即可

不过如果DOM没有显示全,则截图也不全

echarts

<template>
    <div>
        <el-button type="danger" @click="toImage">click</el-button><br>
        <el-button type="primary" @click="drawBar">柱状图</el-button><br>
        <div class="imageWrapper" ref="imageWrapper">
        <slot>
            <div ref="barGraph" style="height: 500px;width:1500px;margin:auto;margin-top:5%;"></div>
        </slot>
    </div>
    </div>
    
</template>
<script>
import html2canvas from 'html2canvas'
export default {
    data(){
        return {
            dataURL: ''
        }
    },
    methods:{
        toImage() {
            let _this=this;
    html2canvas(this.$refs.imageWrapper,{
        backgroundColor: null
    }).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png");
        //this.dataURL = dataURL;
        _this.download(dataURL);
    });
}, 
download(src) {
    var $a = $("<a></a>").attr("href", src).attr("download", "img.png");
    $a[0].click();
},
drawBar: function() {
      let _this = this;
      // 基于dom，初始化echarts实例
      let barGraph = this.$echarts.init(this.$refs.barGraph, "dark");
      // 绘制图表
      barGraph.setOption({
        //标题
        title: {
          text: "全年产量趋势图",
          subtext: "副标题",
          left: "center" // 也可以是数字
        },
        //提示栏(弹窗组件)
        tooltip: {
          //trigger: "item" // 数据项图像触发
          //    formatter: '{a} <br/>{b} : {c}'
          // trigger:'axis'
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        //工具栏
        toolbox: {
          show: _this.showtoolbox,
          feature: {
            // 需要的功能
            saveAsImage: {
              //保存图片
              show: true
            },
            magicType: {
              //切换类型
              type: ["bar", "line"]
            }
          }
        },
        //图例（每一条数据的名字）选择 数据显示或者隐藏
        legend: {
          //left: 'left',
          data: ["本年", "上年"],
          bottom: 0
        },
        xAxis: {
          type: "category",
          name: "x",
          splitLine: { show: false },
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月"
          ]
        },
        yAxis: {},
        grid: {
          left: "2%",
          right: "1%",
          //bottom: "0%",
          containLabel: true
        },
        //数据
        series: [
          {
            name: "本年",
            type: "bar",
            stack: "叠加",
            data: [4, 7, 2, 9, 2, 7, 3, 7, 4, 8, 2, 5],
            itemStyle: {
              normal: {
                label: {
                  show: true //开启显示
                  // position: 'top', //在上方显示
                  // textStyle: { //数值样式
                  // 	color: 'black',
                  // 	fontSize: 16
                  // }
                }
              }
            }
            // markPoint: {
            //   data: [
            //     { type: "max", name: "最大值" },
            //     { type: "min", name: "最小值" }
            //   ]
            // },
            // markLine: {
            //   data: [{ type: "average", name: "平均值" }]
            // }
          },
          {
            name: "上年",
            type: "bar",
            stack: "叠加",
            data: [7, 2, 3, 6, 8, 4, 1, 3, 6, 7, 4, 9],
            itemStyle: {
              normal: {
                label: {
                  show: true //开启显示
                  // position: 'top', //在上方显示
                  // textStyle: { //数值样式
                  // 	color: 'black',
                  // 	fontSize: 16
                  // }
                }
              }
            }
            // markLine: {
            //   data: [
            //     { type: "max", name: "最大值", symbol: "roundRect" },
            //     { type: "min", name: "最小值" }
            //   ]
            // },
            // markPoint: {
            //   data: [{ type: "average", name: "平均值" }]
            // }
          }
        ]
      });
    //   barGraph.on('click', function (params) {
    // console.log(params);
    // // alert(params.seriesName);
    // // alert(params.name);
    // // alert(params.value);
    // _this.test1();
// });
    }
    }
}
</script>
<style scoped>

</style>

 

 

table

<template>
    <div style="height:100%;">
        <el-button type="danger" @click="toImage">click</el-button><br>
        <el-button type="primary" @click="drawBar">柱状图</el-button><br>
        <div class="imageWrapper" >
        <!-- <img class="real_pic" :src="dataURL" />
        <slot>
            <div ref="barGraph" style="height: 500px;width:1500px;margin:auto;margin-top:5%;"></div>  只显示看到的
        </slot> -->
        <table style="background-color:white;" ref="imageWrapper"> <!--在table 上 ref  截图可以全部显示  -->
                            <tr>
                                <th>LotID444</th>
                                <th>Pri</th>
                                <th>Purpose</th>
                                <th>Qty</th>
                                <th>OpeNo</th>
                                <th>OpeName</th>
                                <th>EqpType</th>
                                <th>LotStates</th>
                                <th>Wafer Start</th>
                                <th>YSTDTurn</th>
                                <th>Gap(D)</th>
                                <th>Quota Owner</th>
                                <th>FoupID</th>
                                <th>Location</th>
                                <th>Status</th>
                                <th>Pri Change Stage</th>
                                <th>Remark</th>
                            </tr>
            </table>
    </div>
    </div>
    
</template>
<script>
import html2canvas from 'html2canvas'
export default {
    data(){
        return {
            dataURL: ''
        }
    },
    methods:{
        toImage() {
            let _this=this;
            $("body,html").scrollTop(0);
            this.$nextTick(() => {
    html2canvas(this.$refs.imageWrapper,{
        backgroundColor: null
    }).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png");
        //this.dataURL = dataURL;
        _this.download(dataURL);
    });
    })
}, 
download(src) {
    var $a = $("<a></a>").attr("href", src).attr("download", "img.png");
    $a[0].click();
}
    }
}
</script>
<style scoped>

</style>