js(vue)如何实现页面截图,向后端传递,生成PDF

2024-09-05 09:28

本文主要是介绍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 } = eimageWidth.value = screenWidthimageHeight.value = screenHeightconsole.log('imageHeight.value', imageHeight.value)// 上下的marginmargin.value = imageHeight.value * 0.02// console.log('outer', window.outerWidth, window.outerHeight, screenWidth, screenHeight)const ratio = screenWidth/screenHeightif (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));});});
};

这篇关于js(vue)如何实现页面截图,向后端传递,生成PDF的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1138570

相关文章

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

opencv图像处理之指纹验证的实现

《opencv图像处理之指纹验证的实现》本文主要介绍了opencv图像处理之指纹验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、简介二、具体案例实现1. 图像显示函数2. 指纹验证函数3. 主函数4、运行结果三、总结一、

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一