前端vue 表格转换为图片

最新推荐文章于 2024-05-16 17:04:05 发布

Tan-玛卡巴卡

最新推荐文章于 2024-05-16 17:04:05 发布

阅读量600

点赞数 8

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_60172238/article/details/135828054

版权

本文介绍了如何在Vue项目中利用html2canvas库将el-table组件导出为图片，包括下载依赖、HTML代码示例和相关方法实现。

摘要由CSDN通过智能技术生成

1、下载依赖

 npm 安装
npm install --save html2canvas
 yarn 安装
yarn html2canvas

2、html代码


<el-table ref="multipleTable" :data="tasklist" tooltip-effect="dark"
                style="width: 100%" max-height="250" @selection-change="selectTrain">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="trainName" label="名称" align="center">
                </el-table-column>
            </el-table>
<el-button type="primary" @click="export()">导出</el-button>

3、js代码

  import html2canvas from "html2canvas";

  export() {
      html2canvas(this.$refs.multipleTable).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png");
        // console.log(dataURL);
        if (dataURL !== "") {
          var img = dataURL;
          var alink = document.createElement("a");
          alink.href = img;
          alink.download = "downloadName.png";
          alink.click();
        }
      });
    },

4、完整代码

    <template>
<el-table ref="multipleTable" :data="tasklist" tooltip-effect="dark"
                style="width: 100%" max-height="250" @selection-change="selectTrain">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="trainName" label="名称" align="center">
                </el-table-column>
            </el-table>
   </template>
<script>
import html2canvas from "html2canvas";
export default {
		name: 'userCenter',
		data() {
			return {
}
}

methods: {

  export() {
      html2canvas(this.$refs.multipleTable).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png");
        // console.log(dataURL);
        if (dataURL !== "") {
          var img = dataURL;
          var alink = document.createElement("a");
          alink.href = img;
          alink.download = "downloadName.png";
          alink.click();
        }
      });
    },
		}
}
</script>

最后感谢阅读如果有不足之处请指出