当前位置: 首页 > 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还可以获取文件的大小、创…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...