当前位置: 首页 > news >正文

前端将网页转换为pdf并支持下载与上传

1.pdf下载


handleExport() {const fixedH = document.getElementById("fixed-h");const pageOne = document.getElementById("mix-print-box-one");const pageTwo = document.getElementById("mix-print-box-two");fixedH.style.height = '30vh';pageOne.style.display = 'block';pageTwo.style.display = 'block';// 禁止滚动document.body.addEventListener('touchmove', this.preventDefaultScroll, { passive: false });document.body.addEventListener('wheel', this.preventDefaultScroll, { passive: false });html2canvas(pageOne).then((canvasOne) => {const imgOne = canvasOne.toDataURL("image/png");const pdf = new jsPDF();const propsOne = pdf.getImageProperties(imgOne);const widthOne = pdf.internal.pageSize.getWidth();const heightOne = (propsOne.height * widthOne) / propsOne.width;pdf.addImage(imgOne, "PNG", 0, 0, widthOne, heightOne);html2canvas(pageTwo).then(canvasTwo => {const imgTwo = canvasTwo.toDataURL("image/png");const propsTwo = pdf.getImageProperties(imgTwo);const widthTwo = pdf.internal.pageSize.getWidth();const heightTwo = (propsTwo.height * widthTwo) / propsTwo.width;pdf.addPage(); // 分页pdf.addImage(imgTwo, "PNG", 0, 0, widthTwo, heightTwo);const title = `${this.formOne.application}测试的.pdf`;pdf.save(title);fixedH.style.height = 'auto';pageOne.style.display = 'none';pageTwo.style.display = 'none';// 恢复滚动document.body.removeEventListener('touchmove', this.preventDefaultScroll);document.body.removeEventListener('wheel', this.preventDefaultScroll);});});
}

2.pdf上传


handleUploadPdf(id) {const element = document.getElementById("myElementId");html2canvas(element).then((canvas) => {const imgData = canvas.toDataURL("image/png");const pdf = new jsPDF();const imgProps = pdf.getImageProperties(imgData);const pdfWidth = pdf.internal.pageSize.getWidth();const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;pdf.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);// 将 PDF 转换为 Blob 对象const blob = pdf.output("blob");// 上传文件const fileName = "测试的.pdf";const formData = new FormData();formData.append("file", blob, fileName);uploadPdf(formData).then((res) => {// 将pdf地址传给后端uploadPdfUrl({id,fileName,path: res.fileName,});console.log("上传成功", res.url);});});
}

相关文章:

前端将网页转换为pdf并支持下载与上传

1.pdf下载 handleExport() {const fixedH document.getElementById("fixed-h");const pageOne document.getElementById("mix-print-box-one");const pageTwo document.getElementById("mix-print-box-two");fixedH.style.height 30vh;pageO…...

Android 依赖统一配置管理(Version Catalogs)

最近升级了Android Studio版本到Koala Feature Drop | 2024.1.2,新建项目后发现项目配置又有变化,默认开始使用了一个名叫 Gradle 版本目录的东西,当然也可以称之为依赖统一配置管理,一开始还有点陌生,但是经过一番了解…...

如何为数据看板产品接入实时行情接口并展示行情

在金融科技领域,实时数据是分析和决策的关键因素。通过AllTick的实时行情API,您可以轻松将实时市场数据集成到数据看板产品中,为用户提供丰富的市场洞察。本文将详细介绍如何使用AllTick API,通过WebSocket协议接收并展示实时市场…...

数据结构 C/C++(实验一:线性表)

(大家好,今天分享的是数据结构的相关知识,大家可以在评论区进行互动答疑哦~加油!💕) 目录 提要:实验题目 一、实验目的 二、实验内容及要求 三、算法思想 实验1 实验2 四、源程序及注释 …...

使用WebStorm开发Vue3项目

记录一下使用WebStorm开发Vu3项目时的配置 现在WebStorm可以个人免费使用啦!🤩 基本配置 打包工具:Vite 前端框架:ElementPlus 开发语言:Vue3、TypeScript、Sass 代码检查:ESLint、Prettier IDE&#xf…...

Linux高阶——1103——Signal信号机制

1、信号机制 在linux和unix系统下,如果想要处置(挂起,结束)进程,可以使用信号,经典消息机制,所以进程包括系统进程都是利用信号处置进程的 kill -l——查看所有系统支持的信号 1-31号信号——Unix经典信号&#xff…...

如何编写STM32的定时器程序

编写STM32的定时器程序通常涉及以下步骤: 1. 选择定时器和时钟配置 首先,你需要选择一个可用的定时器(TIM),并配置其时钟源。时钟源可以是内部时钟或外部时钟,通常通过RCC(Reset and Clock Con…...

【C++】C++的单例模式、跟踪内存分配的简单方法

二十四、C的单例模式、跟踪内存分配的简单方法 1、C的单例模式 本小标题不是讨论C的语言特性,而是一种设计模式,用于确保一个类在任何情况下都只有一个实例,并提供一个全局访问点来获取这个实例。即C的单例模式。这种模式常用于资源管理&…...

构建一个导航栏web

<!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>*{margin: 0;padding: 0;}#menu{background-color:purple;width: 100px;height: 50px;}.item{float: left;/* 浮动标签可以让块标签&#xff0c…...

【Linux】Linux安全与密钥登录指南

在使用Linux服务器时&#xff0c;确保服务器的安全至关重要。本文将为你介绍一些关键的Linux安全措施&#xff0c;包括开启密钥登录、查看登录日志、限制登录IP以及查看系统中能够登录的账号。以下内容适合小白用户&#xff0c;通过简单的操作就能有效提升服务器的安全性。 目录…...

数据采集之scrapy框架

本博文使用基本框架完成搜房网或者其他网站的数据爬取&#xff08;重点理解 scrapy 框架的构建过程&#xff0c;使用回调函数&#xff0c;完成数据采集和数据处理&#xff09; 包结构目录如下图所示&#xff1a; 主要代码&#xff1a; &#xff08;sfw.py&#xff09; # -*- …...

ReactPress—基于React的免费开源博客CMS内容管理系统

ReactPress Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎提出宝贵的建议&#xff0c;感谢Star。 ![ReactPress](https://i-blog.csdnimg.cn/direct/0720f155edaa4eadba796f4d96d394d7.png#pic_center ReactPress 是使用React开发的开源发布平台&…...

Android 解决飞行模式下功耗高,起伏波动大的问题

根据现象抓log如下&#xff1a; 10-31 15:26:16.149066 940 3576 I android.hardware.usb1.2-service-mediatekv2: uevent_event change/devices/platform/soc/10026000.pwrap/10026000.pwrap:mt6366/mt6358-gauge/power_supply/battery 10-31 15:26:16.149245 940 3576 …...

2024第三次随堂测验参考答案

7-1 求一组数组中的平均数 输入10个整数&#xff0c;输出这10个整数的的平均数&#xff0c;要求输出的平均数保留2位小数 输入样例&#xff1a; 1 2 3 4 5 6 7 8 9 10 输出样例&#xff1a; 5.50 参考答案&#xff1a; #include <stdio.h> int main(){int sum 0;…...

期权交易策略 v0.1

一.概述 1.参考 <期权波动率与定价> 2.期权价格 标的现价100元,到期日价格可能情况如下。 价格 80 90 100 110 120 概率 20% 20% 20% 20% 20% 持有标的时,期望收益为0.如果持有100的看涨期权&#xff0c;忽略期权费&#xff0c;期望收益为(100-100)*0.2…...

pytorch学习:矩阵分解:奇异值分解(SVD分解)

前言 矩阵分解&#xff08;Matrix Decomposition&#xff09;是将一个矩阵分解成多个矩阵的乘积的过程&#xff0c;这种分解方法在计算、机器学习和线性代数中有广泛应用。不同的分解方式可以简化计算、揭示矩阵的内在结构或提高算法的效率。 奇异值分解 奇异值分解&#xf…...

接口测试用例设计的关键步骤与技巧解析!

简介 接口测试在需求分析完成之后&#xff0c;即可设计对应的接口测试用例&#xff0c;然后根据用例进行接口测试。接口测试用例的设计也需要用到黑盒测试用例设计方法&#xff0c;和测试流程与理论章节的功能测试用例设计的方法类似&#xff0c;设计过程中还需要增加与接口特…...

CSS画icon图标系列(一)

目录 前言&#xff1a; 一、向右箭头 1.原理&#xff1a; 2.代码实现 3.结果展示&#xff1a; 二、钟表 1.原理&#xff1a; 2.代码展示&#xff1a; 3.最终效果&#xff1a; 三、小手机 1.原理&#xff1a; 2.代码展示&#xff1a; 3.最后效果&#xff1a; 四、结…...

【数据结构-合法括号字符串】【华为笔试题】力扣1190. 反转每对括号间的子串

给出一个字符串 s&#xff08;仅含有小写英文字母和括号&#xff09;。 请你按照从括号内到外的顺序&#xff0c;逐层反转每对匹配括号中的字符串&#xff0c;并返回最终的结果。 注意&#xff0c;您的结果中 不应 包含任何括号。 示例 1&#xff1a; 输入&#xff1a;s “…...

qt QFileInfo详解

1、概述 QFileInfo是Qt框架中用于获取文件信息的工具类。它提供了与操作系统无关的文件属性&#xff0c;如文件的名称、位置&#xff08;路径&#xff09;、访问权限、类型&#xff08;是否为目录或符号链接&#xff09;等。此外&#xff0c;QFileInfo还可以获取文件的大小、创…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

k8s从入门到放弃之HPA控制器

k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率&#xff08;或其他自定义指标&#xff09;来调整这些对象的规模&#xff0c;从而帮助应用程序在负…...

前端高频面试题2:浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南

在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点(小球运动模拟)6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...