html2canvas保证用户缩放浏览器或者按f12也不会影响截图效果,js截图技巧

<template>
  <div style="background: #FFFFFF;height: 90%;overflow: scroll;">
    <el-row style="margin-top: 10px;">
      <span class="select-label">计划：</span>
      <el-select v-model="selectValue" placeholder="请选择" @change="changeSelect">
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <el-button @click="captureAndSend">下载</el-button>
    </el-row>
<div id="target">
    <el-row class="first-row">
      <el-col :span="12">
        <div id="leftchart" :style="{width: '100%', height: '300px', margin: '5px auto'}"></div>
      </el-col>
      <el-col :span="12">
        <div id="rightchart" :style="{width: '100%', height: '300px', margin: '5px auto'}"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-table ref="myTable" :data="data" border="true" :header-cell-style="headerStyle" cell-style="text-align:center"
        style="width: 100%;margin: 10px">
        <el-table-column label="">
          <el-table-column label="检查结果">
            <el-table-column label="">
              <el-table-column label="分组" prop="desc" />
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column label="">
          <el-table-column label="远视力检查人数">
            <el-table-column label="">
              <el-table-column label="整" prop="allFar" />
              <el-table-column label="男" prop="maleFar" />
              <el-table-column label="女" prop="femaleFar" />
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column label="裸眼视力正常">
          <el-table-column label="5.0及以上">
            <el-table-column label="">
              <el-table-column label="整" prop="allNormal" />
              <el-table-column label="男" prop="maleNormal" />
              <el-table-column label="女" prop="femaleNormal" />
            </el-table-column>
          </el-table-column>
        </el-table-column>
        <el-table-column label="视力低下(不含夜戴角膜塑形镜人数)">
          <el-table-column label="整体">
            <el-table-column label="">
              <el-table-column label="整" prop="allNear" />
              <el-table-column label="男" prop="maleNear" />
              <el-table-column label="女" prop="femaleNear" />
            </el-table-column>
          </el-table-column>
          <el-table-column label="轻度视力低下">
            <el-table-column label="4.9">
              <el-table-column label="整" prop="all49" />
              <el-table-column label="男" prop="male49" />
              <el-table-column label="女" prop="female49" />
            </el-table-column>
          </el-table-column>
          <el-table-column label="中度视力低下">
            <el-table-column label="4.8~4.6">
              <el-table-column label="整" prop="all46" />
              <el-table-column label="男" prop="male46" />
              <el-table-column label="女" prop="female46" />
            </el-table-column>
          </el-table-column>
          <el-table-column label="重度视力低下">
            <el-table-column label="4.5及以下">
              <el-table-column label="整" prop="all45" />
              <el-table-column label="男" prop="male45" />
              <el-table-column label="女" prop="female45" />
            </el-table-column>
          </el-table-column>
          <el-table-column label="夜戴角膜塑形镜人数">
            <el-table-column label="">
              <el-table-column label="整" prop="allOther" />
              <el-table-column label="男" prop="maleOther" />
              <el-table-column label="女" prop="femaleOther" />
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-row>
</div>
  </div>
</template>
<style>
  .select-label {
    margin-left: 50px;
    margin-right: 10px;
    font-size: 14px;
    color: #606266;
    width: 70px;
    display: inline-block;
  }

  .el-select {
    width: 310px;
  }

  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }

  .el-input__icon {
    line-height: 32px;
  }

  .avue-main {
    background-color: #FFFFFF;
  }

  .first-row {
    margin-top: 40px;
  }
</style>
<script>
import html2canvas from 'html2canvas';
  import {
    getBySchool
  } from "@/api/exam/batchinfo";
import {
  visionsFrom,
  visionsHistogram,
  visionsCake, getPdf
} from "@/api/data/data";
  import {
    // formateData,
    formateDataNum
  } from '@/util/data';
  export default {
    data() {
      return {
        selectValue: "",
        options: [],
        data: []
      };
    },
    mounted() {
      this.loading = this.$loading();
      this.initSelect();
    },
    methods: {
      // 导出PDF
      captureScreen() {
        return new Promise((resolve, reject) => {
          var targetScreen = document.getElementById('target');
          targetScreen.style.width = '2300px';
          this.$refs.myTable.doLayout(); //让表格的分辨率重新渲染
          debugger;
          setTimeout(function (){
            html2canvas(document.querySelector('#target'), {
              logging: false,
              scale: 2,
              useCORS: true,
            }).then(canvas => {
              canvas.toBlob(blob => resolve(blob), 'image/png');
            }).catch(err => reject(err)).finally(() =>{
              targetScreen.style.width='auto';
            });
          },1000)

        });
      },
      sendToServer(blob) {
        const formData = new FormData();
        formData.append('image', blob, 'screenshot.png');
        console.log("发送图片给后台");
        getPdf(formData).then(res => {
          console.log("后台返回的pdf地址", res);
            })
            .catch(error => {
              console.error('Failed to send screenshot:', error);
            });
      },
      captureAndSend() {
        this.captureScreen()
            .then(blob => this.sendToServer(blob))
            .catch(error => console.error('Error capturing screen:', error));
      },