1. 安装插件

npm install html2canvas --save

1. 引入当前需要的vue文件

 import html2canvas from "html2canvas";

1. 全部详解

 <div class="exportTab" @click="getclo">导出课表</div>
<div style="display:flex;align-items: center;margin: 0 20px;" ref="content"><div class="rain"><div class="tearch">教师名称</div><div class="tearch_b">{{name}}</div></div><div class="rain"><div class="tearch" @click="teacTime">选择时间</div><div class="tearch_bs"><div class="timeer" v-for="(itms,inds) in timeList" :key="inds"><div>第{{toChinese(inds)}}节</div><div>{{itms.start_at}}-{{itms.end_at}}</div></div></div></div><div v-for="(item,index) in data_list.week_date" :key="index" class="rain"><div class="tearch_t "><div>{{item.date_at}}</div><div>{{item.week}}</div></div><div class="tearch_bs"><div class="timeer_r" v-for="(itm,ind) in item.content" :key="ind"><div class="timeer" v-if="itm.merge_num==0"><!-- 创建排课 --><div class="create" @click="getCreat(itm,ind,item)">创建排课</div></div><div v-else :style="{height: itm.merge_num*50+'px'}" class="timeers_r"><div :style="{height: itm.merge_num*50-20+'px',backgroundColor:item.week_color}"@click="getCreats(itm,ind,item)" class="create_r"><div>{{itm.label_name}}</div></div><i class="el-icon-circle-close" @click="clearIcon(itm)"></i><!-- 课程详情 --><div class="class_details" :style="{top:-130+'px',}"><p v-if="itm.classs!=null">{{itm.classs.name}}</p><P>{{itm.label_name}}</P><p>{{itm.desc}}</p><p> {{itm.course_time_start+'-'+itm.course_time_end}}</p></div></div></div></div></div></div>
//js// 下载Base64文件downloadFileByBase64(url, fileName) {const a = document.createElement("a");a.setAttribute("href", url)a.setAttribute("download", fileName)a.setAttribute("target", "_blank")let clickEvent = document.createEvent("MouseEvents");clickEvent.initEvent("click", true, true);a.dispatchEvent(clickEvent);},//导出课表getclo() {// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等html2canvas(this.$refs.content, {// width: 30, //截图宽度// height: 50, //截图高度backgroundColor: '#fff', //画出来的图片有白色的边框,不要可设置背景为透明色（null）useCORS: true, //支持图片跨域scale: 1, //设置放大的倍数}).then((canvas) => {// 把生成的base64位图片上传到服务器,生成在线图片地址let url = canvas.toDataURL("image/png") // toDataURL: 图片格式转成 base64// console.log('base64图片地址', url)this.imgUrl = url;this.downloadFileByBase64(url,this.today+'.png');})},