vue3 ts 导出PDF jsPDF
jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档。
1、安装:npm install jspdf
npm install --save html2canvas
2、引入:import jsPDF from "jspdf"
import html2canvas from 'html2canvas'
3、使用
<template><div><a-button @click="handelChangeTime">pdf </a-button></div><div ref="chartRef"><h2>这里面添加需要导出的内容</h2><h3>支持表格、文字、图片、</h3><h3>原理就是将html生成为canvas图片,然后使用jsPDF将图片转为pdf</h3></div>
</template><script lang="ts" setup>
import { ref } from 'vue'
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'// 获取需要转换为PDF的元素 ref
const chartRef = ref()
const handelChangeTime = () => {// 将元素转换为canvas对象html2canvas(chartRef.value).then((canvas) => {// 将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文件中pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight)// 保存PDF文件pdf.save('exported.pdf')})
}
</script><style lang="less" scoped></style>
相关文章:
vue3 ts 导出PDF jsPDF
jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档。 1、安装:npm install jspdf npm install --save html2canvas 2、引入:import jsPDF from "jspdf" import html2canvas from html2canvas 3、使用 <…...
Agent 应用于提示工程
如果Agent模仿了人类在现实世界中的操作方式,那么,能否应用于提示工程即Prompt Engingeering 呢? 从LLM到Prompt Engineering 大型语言模型(LLM)是一种基于Transformer的模型,已经在一个巨大的语料库或文本数据集上进行了训练&…...
云原生安全日志审计
记得添加,把配置文件挂载进去 - mountPath: /etc/kubernetes/auditname: audit-policyreadOnly: true.....- hostPath:path: /etc/kubernetes/audit/type: DirectoryOrCreatename: audit-policy/etc/kubernetes/manifests/kube-apiserver.yaml 具体配置文件如下 a…...
2023 辽宁省大学数学建模 B 题 数据驱动的水下导航适配区分类预测
“海洋强国”战略部署已成为推动中国现代化建设的重要组成部分,国家对 此提出“发展海洋经济,保护海洋生态环境,加快建设海洋强国”的明确要求。 《辽宁省“十四五”海洋经济发展规划》明确未来全省海洋经济的发展战略、 发展目标、重大任…...
ES 8.x新特性一览(完整版)
一、看点 在 2022 年 2 月 11 日,Elasticsearch(ES)正式发布了 8.0 版本,而截止到 2023 年 10 月,历经一年半时间,ES官方已经连续发布了多个版本,最新版本为 8.10.4。这一系列的更新引入了众多引…...
生产实战shell,给安全部门提供日志
生产实战shell,给安全部门提供日志 #!/bin/bashbackup_dir"/data/rw_copy" log_dir"/data/weblogic_log/test/yingyong" nginx_log_dir"/data/nginx_log" apache_log_dir"/data/apache_log" weblogic_log_dir"/data/weblogic_lo…...
HarmonyOS数据管理与应用数据持久化(一)
一. 数据管理概述 功能介绍 数据管理为开发者提供数据存储、数据管理能力,比如联系人应用数据可以保存到数据库中,提供数据库的安全、可靠等管理机制。 数据存储:提供通用数据持久化能力,根据数据特点,分为用户首选项、…...
小型气象站在智慧农业高标准农田建设中的作用
了解“小型气象站在智慧农业高标准农田建设中的作用”,我们需要了解什么是小型气象站?什么是高标准农田? 所谓小型气象站是一种气象观测设备,根据应用领域不同可分为农业气象站,校园气象站,森林气象站&…...
kruskal求最小生成树
算法思路: 将所有边按照权值的大小进行升序排序,然后从小到大一一判断。 如果这个边与之前选择的所有边不会组成回路,就选择这条边分;反之,舍去。 直到具有 n 个顶点的连通网筛选出来 n-1 条边为止。 筛选出来的边…...
876. 链表的中间结点
876. 链表的中间结点 算法 快慢指针 & 题目特征 需要对链表中的节点进行遍历,并且需要根据节点之间的相对位置或者距离进行操作 题目链接:https://leetcode.cn/problems/middle-of-the-linked-list/ 算法 快慢指针 & 题目特征 需要对链表中…...
【机器学习】二、决策树
目录 一、决策树定义: 二、决策树特征选择 2.1 特征选择问题 2.2 信息增益 2.2.1 熵 2.2.2 信息增益 三、决策树的生成 3.1 ID3算法 3.1.1理论推导 3.1.2代码实现 3.2 C4.5 算法 3.2.1理论推导 3.2.2代码实现 四、决策树的剪枝 4.1 原理 4.2 算法思路:…...
低代码PAAS加速推进企业数字化转型
无论是“十四五”规划从国家层面提出的“加快数字化发展 建设数字中国”,还是后疫情时代企业自身的感受,数字化转型已成为必答题。当前 企业 业务场景化、线上趋势愈加明显,越来越多并发的数字化应用场景,而原有集中式架构扩展能力…...
时间复杂度为 O(nlogn) 的排序算法
归并排序 归并排序遵循 分治 的思想:将原问题分解为几个规模较小但类似于原问题的子问题,递归地求解这些子问题,然后合并这些子问题的解来建立原问题的解,归并排序的步骤如下: 划分:分解待排序的 n 个元素…...
掌控你的Mac性能:System Dashboard Pro,一款专业的系统监视器
作为Mac用户,你是否曾经想要更好地了解你的电脑性能,以便优化其运行?是否想要实时监控系统状态,以便及时发现并解决问题?如果你有这样的需求,那么System Dashboard Pro就是你的不二之选。 System Dashboar…...
C++ Qt如何往Windows AppData目录写数据
在使用Qt开发客户端软件时,我们可以把程序相关信息保存到AppData目录, 下次启动时读取,就可以保存程序的状态,便于用户使用。 Windows AppData目录是Windows操作系统中的一个重要目录,主要用于存储应用程序的自定义设置、文件和数据。这个目录包含了许多与应用程序相关的配…...
xargs命令
xargs命令 xargs 命令是一个非常好用的 Linux 命令,它可以将管道或标准输入转换成命令行参数,并用这些参数来执行指定 的命令。默认情况下, xargs 命令会将输入按照空格、制表符、换行符等符号进行分隔,并将它们作为一组参数 传…...
【原创】java+swing+mysql无偿献血管理系统设计与实现
摘要: 无偿献血管理系统是为了实现无偿献血规范化、有序化、高效化的管理而设计的。本文主要介绍使用java语言开发一个基于C/S架构的无偿献血管理系统,提高无偿献血管理的工作效率。 功能分析: 系统主要提供给管理员、无偿献血人员&#x…...
C语言 Number 1 基本数据类型
数据类型的定义 c语言的数据分类基本类型整型浮点型float和double的精度和范围范围精度 枚举类型空类型派生类型派生的一般表达形式 注 c语言的数据分类 首先是针对C语言的数据类型做个整理 大致分为四个大类型 基本类型枚举类型空类型派生类型 那么根据以上四个大类型 我们…...
mac录屏快捷键指南,轻松录制屏幕内容!
“大家知道mac电脑有录屏快捷键吗,现在录屏不太方便,每次都花很多时间,要是有录屏快捷键,应该会快速很多,可是哪里都找不到,有人知道吗?帮帮我!” 苹果的mac电脑以其精美的设计和卓…...
精准测试是个错误
如果你已经了解了精准测试在行业的主流做法,你可以跳过相关内容。 行业里对于精准测试的定义 在网上流传着一些精准测试的定义(如果你对这些定义不感冒,可直接跳到我个人的定义): 自网易陈逸青(2020&#x…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库,例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体,比如 SnowballFight、Huggy the Do…...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)
本期内容并不是很难,相信大家会学的很愉快,当然对于有后端基础的朋友来说,本期内容更加容易了解,当然没有基础的也别担心,本期内容会详细解释有关内容 本期用到的软件:yakit(因为经过之前好多期…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习) 一、Aspose.PDF 简介二、说明(⚠️仅供学习与研究使用)三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化(Gradient Normalization) (2) 判别器梯度间隙正则化(Discriminator Gradient Gap Regularization) (3) 自注意力机制(Self-Attention) 3. 完整损失函数 二…...
