html2canvas+jsPDF实现前端导出pdf
html2canvas+jsPDF实现前端导出pdf
- 安装插件包
npm install jspdf
npm install html2canvas
- 引入插件
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
- 生成pdf
const perCanvas = document.createElement('canvas');perCanvas.style.backgroundColor = '#fff'const context = perCanvas.getContext('2d');html2canvas(this.$refs.pdfContent, {scale: 4, //放大防止模糊dpi: 300 // 处理模糊问题}).then((canvas) => {const canvasData = canvas.toDataURL('image/jpeg', 1.0);// pdf的尺寸const pdfWidth = canvas.width;const pdfHeight = pdfWidth * 1.414;//切割后的canvas图片的宽高,就等于每页pdf的宽高perCanvas.width = canvas.width;perCanvas.height = pdfHeight;// 每张图片的高度:适当减少100,上下各留50页边距const perHeight = pdfHeight - 100;// 计算切割次数let splitCount = Math.ceil(canvas.height / perHeight);if (splitCount * perHeight < canvas.height) splitCount++;//创建img对象,加载完整的canvas图片const img = new Image();img.src = canvasData;//创建pdf对象//待图片加载完成setTimeout(() => {let pdf = new jsPDF('p', 'pt', [pdfWidth, pdfHeight]);//切割canvas图片,贴到每一页pdf中for (let i = 0; i < splitCount; i++) {const startY = i * perHeight; // 起始y坐标// 清空画布context.clearRect(0, 0, perCanvas.width, pdfHeight);context.fillStyle = '#fff';context.fillRect(0, 0, perCanvas.width, pdfHeight);// 绘制当前切割区域的图片context.drawImage(img, 0, startY, perCanvas.width, perHeight, 0, 0, perCanvas.width, perHeight);const perCanvasData = perCanvas.toDataURL('image/jpeg', 1.0);pdf.addImage(perCanvasData, 'JPEG', 0, 50, perCanvas.width, perCanvas.height, '', 0);if (i < splitCount - 1) pdf.addPage();};let pdfBlob = pdf.output('blob');// pdf.save("content.pdf"); 执行此api会直接下载this.showpdf = falselet signBlob = new FormData() //把文件上传到后台signBlob.append('file', pdfBlob, ".pdf")//此处将signBlob上传即可}, 0)
相关文章:
html2canvas+jsPDF实现前端导出pdf
html2canvasjsPDF实现前端导出pdf 安装插件包 npm install jspdf npm install html2canvas引入插件 import html2canvas from html2canvas; import jsPDF from jspdf;生成pdf const perCanvas document.createElement(canvas);perCanvas.style.backgroundColor #fffconst …...
Paimon新版本核心特性和生产实践解读
最近Apche Paimon发布了最新版本0.7.0,在这个版本中,Paimon对一些新特性进行了增强。 Paimon在数据湖领域发展迅速,未来会在整个数据开发领域占有很重要的地位,今天我们来盘点一下当前能力的特点以及在生产环境中的使用情况。 Loo…...
Java设计模式-策略模式
策略模式1 概述2 结构3 案例实现4 优缺点5 使用场景6 JDK源码解析 策略模式 1 概述 先看下面的图片,我们去旅游选择出行模式有很多种,可以骑自行车、可以坐汽车、可以坐火车、可以坐飞机。 作为一个程序猿,开发需要选择一款开发工具&#x…...
vxe-table配合Export2Excel导出object类型数据{type,count}。表格数据呈现是利用插槽,导出只要count该怎么做
先贴一张数据来: 一、然后是vxe-grid的columns配置: 然后就正常用封装好的Export2Excel就行。 碰到一次在控制台报错: 没复现出来,大概就说是count咋样咋样。 以后碰到的话再说,各位要用的话也注意看看 二、或者 用js…...
Java面试题(主要分清区别!!!)
RequestBody和ResponseBody的区别? RequestBody:接收json或xml数据 ResponseBody的:返回json或xml数据 RestController和Controller的区别? Controller:默认返回的是jsp页面 RestController:返回的是一个js…...
OD_2024_C卷_200分_2、石头剪刀布【JAVA】【逻辑分析】
题目描述 石头剪刀布游戏有 3 种出拳形状:石头、剪刀、布。分别用字母A、B、C表示。 游戏规则: 出拳形状之间的胜负规则如下: A > B; B > C; C > A; “>” 左边一个字母,表示相对…...
矩阵求导笔记
文章目录 1. ML中为什么需要矩阵求导2. 向量函数与矩阵求导初印象3. YX 拉伸术3.1 f(x)为标量,X为列向量3.2 f(x)为列向量,X 为标量3.3 f(x)为列向量,X 为列向量 4. 常见矩阵求导公式4.1 Y A T X YA^TX YATX4.2 Y X T A X YX^TAX YXTAX 1…...
全量知识系统问题及SmartChat给出的答复 之19 关于演示模板
Q.60 可参考的演示模版 (word-def occupiedinterest 5type EBsubclass SEBtemplate (script $Demonstrateactor nilobject nildemands nilmethod (scene $Occupyactor nillocation nil))fill (((actor) (top-of *actor-stack*))((method actor) (t…...
Linux学习——线程的控制
目录 编辑 一,线程的创建 二,线程的退出 1,在子线程内return 2,使用pthread_exit(void*) 三,线程等待 四,线程获取自己的id值 五,线程取消 六,线程分离 一,线程的创建 在对…...
Rust常用特型之Drop特型
Rust常用特型之Drop特型.md在Rust标准库中,存在很多常用的工具类特型,它们能帮助我们写出更具有Rust风格的代码。 今天,我们主要学习Drop特型。 (注:本文更多的是对《Programing Rust 2nd Edition》的自己翻译和理解&…...
嵌入式 Linux 学习
在学习嵌入式 Linux 之前,我们先来了解一下嵌入式 Linux 有哪些东西。 1. 嵌入式 Linux 的组成 嵌入式 Linux 系统,就相当于一套完整的 PC 软件系统。 无论你是 Linux 电脑还是 windows 电脑,它们在软件方面的组成都是类似的。 我们一开电…...
Makedown语法
这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…...
SQLite语句
1.重写SQLiteOpenHelper // 例. public class MySQLiteOpenHelper extends SQLiteOpenHelper {public MySQLiteOpenHelper(Nullable Context context, Nullable String name, Nullable SQLiteDatabase.CursorFactory factory, int version) {super(context, name, factory, ve…...
Spring揭秘:Aware接口应用场景及实现原理!
内容概要 Aware接口赋予了Bean更多自感知的能力,通过实现不同的Aware接口,Bean可以轻松地获取到Spring容器中的其他资源引用,像ApplicationContext、BeanFactory等。 这样不仅增强了Bean的功能,还提高了代码的可维护性和扩展性&…...
校园小情书微信小程序,社区小程序前后端开源,校园表白墙交友小程序
功能 表白墙卖舍友步数旅行步数排行榜情侣脸漫画脸个人主页私信站内消息今日话题评论点赞收藏 效果图...
从Pandas到Polars :数据的ETL和查询
对于我们日常的数据清理、预处理和分析方面的大多数任务,Pandas已经绰绰有余。但是当数据量变得非常大时,它的性能开始下降。 本文将介绍如何将日常的数据ETL和查询过滤的Pandas转换成polars。 图片 Polars的优势 Polars是一个用于Rust和Python的Data…...
Node.Js编码注意事项
Node.js 中不能使用 BOM 和 DOM 的 API,可以使用 console 和定时器 APINode.js 中的顶级对象为 global,也可以用 globalThis 访问顶级对象 浏览器端js的组成 Node.js中的JavaScript组成 相比较之下发现只有console与定时器是两个API所共有的ÿ…...
floodfill算法题目
前言 大家好,我是jiantaoyab,在下面的题目中慢慢体会floodFill算法,虽然是新的算法,但是用的思想和前面的文章几乎一样,代码格式也几乎一样,但不要去背代码 图像渲染 https://leetcode.cn/problems/flood…...
AI相关的实用工具分享
AI实用工具大赏:赋能科研与生活,探索AI的无限可能 前言 在数字化浪潮汹涌而至的今天,人工智能(AI)已经渗透到我们生活的方方面面,无论是工作还是生活,都在悄然发生改变。AI的崛起不仅为我们带…...
K8s — PVC|PV Terminating State
在本文中,我们将讨论PV和PVC一直Terminating的状态。 何时会Terminting? 在以下情况下,资源将处于Terminating状态。 在删除Bounded 状态的PVC之前,删除了对应的PV,PV在删除后是Terminting状态。删除PVC时,仍有引用…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935,SRS管理页面端口是8080,可…...
HarmonyOS运动开发:如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit(传感器服务)# 前言 在运动类应用中,运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据,如配速、距离、卡路里消耗等,用户可以更清晰…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中,push 和 present 是两种不同的视图控制器切换方式,它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...
虚拟电厂发展三大趋势:市场化、技术主导、车网互联
市场化:从政策驱动到多元盈利 政策全面赋能 2025年4月,国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》,首次明确虚拟电厂为“独立市场主体”,提出硬性目标:2027年全国调节能力≥2000万千瓦࿰…...
CSS | transition 和 transform的用处和区别
省流总结: transform用于变换/变形,transition是动画控制器 transform 用来对元素进行变形,常见的操作如下,它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
基于stm32F10x 系列微控制器的智能电子琴(附完整项目源码、详细接线及讲解视频)
注:文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档 所用硬件:STM32F103C8T6、无源蜂鸣器、44矩阵键盘、flash存储模块、OLED显示屏、RGB三色灯、面包板、杜邦线、usb转ttl串口 stm32f103c8t6 面包板 …...
统计学(第8版)——统计抽样学习笔记(考试用)
一、统计抽样的核心内容与问题 研究内容 从总体中科学抽取样本的方法利用样本数据推断总体特征(均值、比率、总量)控制抽样误差与非抽样误差 解决的核心问题 在成本约束下,用少量样本准确推断总体特征量化估计结果的可靠性(置…...
