vue截取页面一部分内容并导出图片

.玖

已于 2023-02-06 10:36:03 修改

阅读量457

点赞数

文章标签： javascript vue.js npm 前端 Powered by 金山文档

于 2023-02-06 10:28:15 首次发布

本文链接：https://blog.csdn.net/weixin_66567934/article/details/128897440

版权

安装插件

npm install html2canvas --save

引入当前需要的vue文件

 import html2canvas from "html2canvas";

全部详解

 <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');
          })
      },