前端将页面转化为图片---进行下载导出、打印等功能

1.需要实现一个将div页面的东西导出,使用到了html2canvas

官网：

配置型 | HTML2CANVAS 中文文档 (allenchinese.github.io)

2.下载html2canvas

npm install --save html2canvas

3.导入使用到的页面

import html2canvas from 'html2canvas'

4.创建图片基础应用

主要代码：

  creatImg() {const setup = {useCORS: true, // 使用跨域};html2canvas(this.$refs.pictureAll, setup).then((canvas) => {this.url = canvas.toDataURL("image/jpg");//生成的图片路径// this.exportPicture(link, "文件名");});},

<template><div id="app"><el-button @click="creatImg">生成图片</el-button><div ref='pictureAll'>hgjgjdd我顶顶顶</div><img :src="url" alt=""></div>
</template><script>
import html2canvas from 'html2canvas'
export default {name: 'App',components: {HelloWorld},data(){return {url:'',}},methods:{creatImg() {const setup = {useCORS: true, // 使用跨域};html2canvas(this.$refs.pictureAll, setup).then((canvas) => {this.url = canvas.toDataURL("image/jpg");//生成的图片路径// this.exportPicture(link, "文件名");});},}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

其他属性：

data-html2canvas-ignore：添加这个属性，生成图片的时候回忽略此部分，在想忽略的标签直接添加这个属性即可，例如：

  <div data-html2canvas-ignore style="width:100%;height:20px;background:red" @click="test">gfdgdf</div>