前端html生成PDF
需要用到的组件
1、html2canvas
地址:http://html2canvas.hertzen.com/
安装:npm install --save html2canvas
2、jsPDF
地址:https://github.com/parallax/jsPDF
安装:npm install jspdf --save
代码
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'export default function (name, dom) {// returnlet targetDom = document.querySelector(dom)let scrollTop = document.documentElement.scrollTop || document.body.scrollTopconst steup = {allowTaint: true, // 是否允许跨源图片useCORS: true, // 是否尝试使用 CORS 从服务器加载图像height: targetDom.offsetHeight,width: targetDom.offsetWidth,windowWidth: document.body.scrollWidth, // 渲染Element时使用的窗口宽度windowHeight: document.body.scrollHeight, // 渲染Element时使用的窗口高度x: 0,y: scrollTop, // 用网页滚动的高度定位y轴顶点dpi: window.devicePixelRatio * 2,scale: 2 // 用于渲染的比例。}html2Canvas(targetDom, steup).then(function (canvas) {let contentWidth = canvas.widthlet contentHeight = canvas.height// a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高let imgWidth = 595.28let a4Height = 841.89let imgHeight = Math.floor(imgWidth / contentWidth * contentHeight)// 一页pdf显示html页面生成的canvas高度; pageHeight + 2是为了去掉最后的空白页let pageHeight = Math.floor(contentWidth / imgWidth * a4Height) + 2// 未生成pdf的html页面高度let leftHeight = contentHeight//页面偏移let position = 0// 返回图片dataURL,参数:图片格式和清晰度(0-1)let pageData = canvas.toDataURL('image/jpeg', 1.0)/*** new JsPDF(x, y, z)* x: 排版方向,默认是竖版 landscape* y: 单位* z: 尺寸* **/let PDF = new JsPDF('', 'pt', 'a4')// 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)// 当内容未超过pdf一页显示的范围,无需分页if (leftHeight < pageHeight) {// 20, 0 l两个参数分别控制 左边 上边的距离, 此处将页面高度按照a4纸宽高比列进行压缩PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)} else {while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= a4Height//避免添加空白页if (leftHeight > 0) {PDF.addPage()}}}PDF.save(name + '.pdf')})
}
在页面中使用
import htmlToPDF from '@/utils/htmlToPDF'methods: {getPdf () {htmlToPDF('PDF名称', 'ID')}}
相关文章:
前端html生成PDF
需要用到的组件 1、html2canvas 地址:http://html2canvas.hertzen.com/ 安装:npm install --save html2canvas 2、jsPDF 地址:https://github.com/parallax/jsPDF 安装:npm install jspdf --save 代码 // 导出页面为PDF格式 im…...
强化学习代码实战(3) --- 寻找真我
前言 本文内容来自于南京大学郭宪老师在博文视点学院录制的视频,课程仅9元地址,配套书籍为深入浅出强化学习 编程实战 郭宪地址。 正文 我们发现多臂赌博机执行一个动作之后,无论是选择摇臂1,摇臂2,还是摇臂3之后都会返…...
SA+ST表维护height+单调队列维护:CF1073G
https://www.luogu.com.cn/problem/CF1073G lcp相关的,先跑个sa,然后height建个ST表 现在考虑询问,我们按A和B按 r k rk rk 排序。现在考虑B->A,反过来同理。 我们可以用单调队列维护,满足height是单增的。因为…...
Java中JVM、JRE和JDK三者有什么区别和联系?
任何语言或者软件的运行都需要环境。就像人要生活在空气中,鱼要活在水中,喜阴植物就不能放在阳光下暴晒一样,任何对象个体的存在都离不开其所需要的环境,编程语言亦是一样的。 java 语言的开发运行,也离不开 Java 语言…...
秋季期中考复现xj
flow analysis 1 What is the backdoor file name that comes with the server?( Including file suffix) 服务器自带的后门文件是什么?(含文件后缀) 题目还要求最后把那个文件名MD5一下,再去提交 开始的前三题是流量分析的&…...
【代码随想录】算法训练营 第十四天 第六章 二叉树 Part 1
递归遍历 递归法讲究的就是一个格式,在外边再定义一个用于递归求解的函数reverser,参数是递归的二叉树当前根节点和用于保存遍历得到的答案序列的vector容器; 函数中的格式就是,先写递归终止条件,也就是遍历的结点为…...
【访问控制】—>《熟练使用ACL进行上网行为管理》
✍ 标准和高级ACL功能介绍; ✍ 思科和华为ACL功能有什么区别? ✍ 现网中ACL都有哪些使用场景? -- ACL - 访问控制列表 - 控制: 能通/不能通 -- ACL - 结合功能 list - 简化版本的行为管理 -- 插件性质的功能 --…...
MySQL外键,表与表的关系,多表查询,Navicat软件
外键 MySQL可以使用外键来保持表之间的关系完整性。 要设置外键,可以按照以下步骤进行操作: 在创建表时,使用FOREIGN KEY关键字来指定外键列: CREATE TABLE table1 (id INT PRIMARY KEY,name VARCHAR(50),table2_id INT,FOREI…...
Linux系统镜像备忘
阿里镜像源: ubuntu ubuntu-releases安装包下载_开源镜像站-阿里云 centos centos-stream安装包下载_开源镜像站-阿里云...
Docker容器端口在主机的映射
Docker容器端口在主机的映射 Docker 允许你在启动容器时进行多个端口映射,以便将容器内部的端口映射到宿主机上的不同端口。你可以使用-p或--publish标志来指定端口映射。以下是一些示例,说明如何在 Docker 启动容器时进行多个端口映射: 映…...
Spring Boot中RedisTemplate的使用
当前Spring Boot的版本为2.7.6,在使用RedisTemplate之前我们需要在pom.xml中引入下述依赖: <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><vers…...
GSCoolink GSV6183 带嵌入式MCU的MIPI D-PHY 转 DP/eDP
Gscoolink GSV6183是一款高性能、低功耗的MIPI D-PHY到DisplayPort/eDP 1.4转换器。通过集成基于RISC-V的增强型微控制器,GSV6183创造了一种具有成本效益的解决方案,提供了上市时间优势。MIPI D-PHY接收器支持CSI-2版本1.3和DSI版本1.3,每条通…...
Linux文件系统 struct dentry 结构体解析
文章目录 前言一、目录项简介二、struct dentry2.1 简介2.2 dentry和inode关联2.3 目录项视图2.4 目录项状态2.5 目录项特点 三、dentry cache3.1 简介3.2 dentry cache 初始化3.3 dentry cache 查看 四、dentry与mount、file的关联五、其他参考资料 前言 这两篇文章介绍了: V…...
C++——vector
目录 vector vector常用接口 构造函数 operator[]size() 迭代器 范围for capacity() resize() reverse() push_back和pop_back insert erase() algorithm::sort 注意 迭代器失效 vector vector单词直译是向量的意思,这个容器可以容纳不同的类型数据&am…...
html5语义化标签
目录 前言 什么是语义化标签 常见的语义化标签 语义化的好处 前言 HTML5 的设计目的是为了在移动设备上支持多媒体。之前网页如果想嵌入视频音频,需要用到 flash ,但是苹果设备是不支持 flash 的,所以为了改变这一现状,html5 …...
SQL Server批量删除数据库中的表
如果想要删除数据库中temp 开头的中间表 1. SQL 语句实现 use [DBName] --todo go select drop table name from sys.tables where name like temp% go 将查询结果粘贴到数据库中运行 2. 数据库 单击目标数据库中的Tables ,然后按F7 键,按Name 进行排序&…...
使用SecScanC2构建P2P去中心化网络实现反溯源
个人博客: xzajyjs.cn 前言 这款工具是为了帮助安全研究人员在渗透测试过程中防止扫描被封禁、保护自己免溯源的一种新思路。其利用到了区块链中的p2p点对点去中心化技术构建以来构建代理池。 工具链接:https://github.com/xzajyjs/SecScanC2 实验过程 该工具分为…...
【API篇】七、Flink窗口
文章目录 1、窗口2、分类3、窗口API概览4、窗口分配器 在批处理统计中,可以等待一批数据都到齐后,统一处理。但是在无界流的实时处理统计中,是来一条就得处理一条,那么如何统计最近一段时间内的数据呢? ⇒ 窗口的概念&…...
软件测试面试1000问(含文档)
前前后后面试了有20多家的公司吧,最近抽空把当时的录音整理了下,然后给大家分享下 开头都是差不多,就让做一个自我介绍,这个不用再给大家普及了吧 同时,我也准备了一份软件测试视频教程(含接口、自动化、…...
基于算法竞赛的c++编程(28)结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
PL0语法,分析器实现!
简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架,允许使用简单的变成模型跨计算机对大型集群进行分布式处理(1.海量的数据存储 2.海量数据的计算)Hadoop核心组件 hdfs(分布式文件存储系统)&a…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定,这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中,积分电荷法最为常用,其原理是通过测量在电容器上积累的热释电电荷,从而确定热释电系数…...
