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

利用 htmm12canvas

首先引入

npm install express multer
# 或者
yarn add express multer

代码如下：

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

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

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

        ServiceResponse 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

          

            

              设备采购备件排名
            
            
          
          

            

              备件消耗量排名
            
            
          
          

            

              呆滞库存统计
            
            
          
        

然后这里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));
    });
  });
};