做绿色产品的网站石家庄兼职做网站
1.需要实现一个将div页面的东西导出,使用到了html2canvas
官网：
配置型 | HTML2CANVAS 中文文档 (allenchinese.github.io)
2.下载html2canvas
npm install --save html2canvas3.导入使用到的页面
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>