js（vue）如何实现页面截图，向后端传递，生成PDF

利用 htmm12canvas

首先引入

npm install express multer
# 或者
yarn add express multer

代码如下：

<template>
  <!-- <div style="width:100%;height:100%;overflow-y: scroll">
    <img :src="svg" style="width: 100%;" />
  </div> -->
  <div class="backScreen">
    中间代码省略
  </div>
</template>

<script setup>

import { nextTick, ref, provide } from "vue";
import { useGetResizeBodySize } from '@/hooks/useGetScaleHeight'

import EquConsumeSpareRank from './charts/EquConsumeSpareRank'
import EquPurchaseSpareRank from './charts/EquPurchaseSpareRank'
import SpareConsumeRank from './charts/SpareConsumeRank'
import SpareOverView from './charts/SpareOverView'
import StoreAvgDurationRank from './charts/StoreAvgDurationRank'
import StoreInactive from './charts/StoreInactive'

import img169 from './imgs/dp_16.9.svg'
import img1610 from './imgs/dp_16.10.svg'
import html2canvas from 'html2canvas';




const imageWidth = ref('100%')
const imageHeight = ref('100%')
const backImg = ref(img169)
const fullScreen = ref(false)
const margin = ref(0)

provide('screenHeight', imageHeight)

useGetResizeBodySize(e => {
  const { screenWidth, screenHeight } = e
  imageWidth.value = screenWidth
  imageHeight.value = screenHeight
  console.log('imageHeight.value', imageHeight.value)
  // 上下的margin
  margin.value = imageHeight.value * 0.02
  // console.log('outer', window.outerWidth, window.outerHeight, screenWidth, screenHeight)
  const ratio = screenWidth/screenHeight
  if (ratio === 16/9 || ratio === 16/10) {
    fullScreen.value = true
  }
  if (ratio === 16/10) {
    backImg.value = img1610
  }else {
    backImg.value = img169
  }

})

// 定义截图和发送截图的方法   下面是关键代码
const captureScreen = async () => {
  return new Promise((resolve, reject) => {
    nextTick(() => {
      html2canvas(document.querySelector('.backScreen'), {
        logging: false,
        scale: 2,
        useCORS: true,
      }).then(canvas => {
        canvas.toBlob(blob => resolve(blob), 'image/png');
      }).catch(err => reject(err));
    });
  });
};

const sendToServer = async (blob) => {
  try {
    const formData = new FormData();
    formData.append('image', blob, 'screenshot.png');
    console.log("发送图片给后台")
    const response = await fetch('http://127.0.0.1:8081/test/upload-image', {
      method: 'POST',
      body: formData,
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Failed to send screenshot:', error);
  }
};

// 监听键盘事件
const handleKeyPress = (event) => {
  // 检查是否按下了 "O" 键
  if (event.key === 'o' || event.keyCode === 79) {
    console.log("O键被按下")
    event.preventDefault(); // 防止默认行为
    captureScreen().then(blob => {
      sendToServer(blob);
    }).catch(error => {
      console.error('Error capturing screen:', error);
    });
  }
};

// 在组件挂载后添加键盘事件监听器
onMounted(() => {
  document.addEventListener('keydown', handleKeyPress);

  // 清除引用以防止内存泄漏
  onUnmounted(() => {
    document.removeEventListener('keydown', handleKeyPress);
  });
});


</script>

<style lang="scss" scoped>
:deep .el-input__wrapper {
    height: 22px;
    font-size: 10px;
    background-color: #ABD6FF;
    // background-color: transparent;
    /* border: 0px !important; */
    box-shadow: none;
}
.chartRow {
  width: 100%;
  height: 400;
  display: flex;
  justify-content: space-between;
}
.backScreen {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  // align-items: center;
  position: relative;

  // overflow: auto;
  // background-color: lightgray;
  // background-image: url('./img/bk.svg');
  // background-size: cover;
  // background-clip: border-box;
  // background-repeat: no-repeat;
  .backImg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  .contentBack {
    // background-color: white;
    // margin: 11% 120px;
    margin-top: 6%;
    margin-left: 6%;
    margin-right: 6%;
    flex: 1;
    z-index: 10;
    height: 82%;

    .card {
      width: 430px;
      height: 100%;
      // height: 370px;
      background-size: 100% 100%;
      background-color: #0241A2;
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .card_title {
        width: 100%;
        height: 46px;
        background: linear-gradient(#1187FB, #0241A2);
        border-radius: 20px 20px 0 0;
        padding: 13px 0 0 24px;
        color: #30D9FF
      }
    }

    .cardMax {
      // height: 370px;
      height: 100%;
      background-size: 100% 100%;
      background-color: #0241A2;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
      .cardMax_title {
        width: 100%;
        height: 46px;
        background: linear-gradient(#1187FB, #0241A2);
        border-radius: 20px 20px 0 0;
        padding: 13px 0 0 24px;
        color: #30D9FF
      }
    }
  }

}
</style>

然后是后台很简单的实现，至于生成PDF再说

@RestController
@RequestMapping("test")
@Api(value = "ImageUploadController", tags = "截图导入接口")
public class ImageUploadController {

    @PostMapping("/upload-image")
    public ServiceResponse<String> handleFileUpload(@RequestParam("image") MultipartFile file) {
        if (file.isEmpty()) {
            throw new RuntimeException("文件为空");
        }

        ServiceResponse<String> response = new ServiceResponse<>();

        // 将图片保存到 D:\tu\ 目录下
        String filePath = "D:\\tu\\" + file.getOriginalFilename();
        try {
            file.transferTo(new File(filePath));
            response.setSucess("上传成功");
        } catch (Exception e) {
            response.setError("上传失败");
        }

        return response;
    }
}

如果是针对指定范围的

就在其div加上唯一id

<div id="inactive-store-div" class="chartRow" :style="{'marginTop': margin + 'px', height: (0.4 * imageHeight) + 'px'}">
          <div class="card">
            <div class="card_title">
              <span>设备采购备件排名</span>
            </div>
            <EquPurchaseSpareRank :width="'430'" :height="'260'" @equCountsMfrs="equCountsMfrs"></EquPurchaseSpareRank>
          </div>
          <div class="cardMax" :style="{'margin-left': margin + 'px', 'margin-right': margin + 'px'}">
            <div class="cardMax_title">
              <span>备件消耗量排名</span>
            </div>
            <SpareConsumeRank :width="'800'" :height="'260'" @equCountsMfrs="equCountsMfrs"></SpareConsumeRank>
          </div>
          <div class="card">
            <div class="card_title">
              <span>呆滞库存统计</span>
            </div>
            <StoreInactive :width="'455'" :height="'260'" @equCountsMfrs="equCountsMfrs"></StoreInactive>
          </div>
        </div>

然后这里js改成

const captureScreen = async () => {
  return new Promise((resolve, reject) => {
    nextTick(() => {
      // html2canvas(document.querySelector('.backScreen'), {   //针对全屏
      html2canvas(document.querySelector('#inactive-store-div'), {   //针对指定的范围
      logging: false,
        scale: 2,
        useCORS: true,
      }).then(canvas => {
        canvas.toBlob(blob => resolve(blob), 'image/png');
      }).catch(err => reject(err));
    });
  });
};