Vue组件开发-使用 html2canvas 和 jspdf 库实现PDF文件导出 设置页面大小及方向
在 Vue 项目中实现导出 PDF 文件、调整文件页面大小和页面方向的功能,使用 html2canvas
将 HTML 内容转换为图片,再使用 jspdf
把图片添加到 PDF 文件中。以下是详细的实现步骤和代码示例:
步骤 1:安装依赖
首先,在项目中安装 html2canvas
和 jspdf
:
npm install html2canvas jspdf
步骤 2:创建 Vue 组件
以下是一个完整的 Vue 组件示例,包含导出 PDF、调整页面大小和方向的功能:
<template><div><!-- 选择页面大小的下拉框 --><select v-model="selectedPageSize"><option value="a4">A4</option><option value="a3">A3</option><option value="letter">Letter</option></select><!-- 选择页面方向的下拉框 --><select v-model="selectedPageOrientation"><option value="portrait">纵向</option><option value="landscape">横向</option></select><!-- 导出 PDF 的按钮 --><button @click="exportToPDF">导出为 PDF</button><!-- 需要导出为 PDF 的内容区域 --><div id="contentToExport"><h1>这是要导出为 PDF 的内容</h1><p>可以在这里添加更多文本、图片、表格等元素。</p></div></div>
</template><script>
// 引入 html2canvas 用于将 HTML 元素转换为 canvas 图像
import html2canvas from 'html2canvas';
// 引入 jsPDF 用于创建和保存 PDF 文件
import jsPDF from 'jspdf';export default {data() {return {// 存储用户选择的页面大小,默认为 A4selectedPageSize: 'a4',// 存储用户选择的页面方向,默认为纵向selectedPageOrientation: 'portrait'};},methods: {async exportToPDF() {// 获取需要导出为 PDF 的 HTML 元素const element = document.getElementById('contentToExport');try {// 使用 html2canvas 将 HTML 元素转换为 canvas 图像const canvas = await html2canvas(element);// 将 canvas 图像转换为 base64 编码的 PNG 图片数据const imgData = canvas.toDataURL('image/png');// 根据用户选择的页面大小和方向创建 jsPDF 实例const pdf = new jsPDF({orientation: this.selectedPageOrientation, // 页面方向unit: 'mm', // 单位为毫米format: this.selectedPageSize // 页面大小});// 获取 PDF 页面的宽度和高度const pdfWidth = pdf.internal.pageSize.getWidth();const pdfHeight = pdf.internal.pageSize.getHeight();// 计算图像的宽度和高度,使图像按比例适应页面const imgWidth = pdfWidth;const imgHeight = (canvas.height * imgWidth) / canvas.width;let heightLeft = imgHeight;let position = 0;// 将图像添加到第一页 PDFpdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);heightLeft -= pdfHeight;// 如果图像高度超过一页,进行分页处理while (heightLeft >= 0) {position = heightLeft - imgHeight;pdf.addPage();pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);heightLeft -= pdfHeight;}// 保存 PDF 文件,文件名为 exported.pdfpdf.save('exported.pdf');} catch (error) {// 捕获并打印导出过程中可能出现的错误console.error('导出 PDF 时出错:', error);}}}
};
</script><style scoped>
/* 为需要导出的内容区域添加样式 */
#contentToExport {padding: 20px;border: 1px solid #ccc;margin-top: 20px;
}
</style>
代码解释
-
模板部分(
<template>
):- 两个
select
元素分别用于选择页面大小和页面方向,通过v-model
指令绑定到组件的数据selectedPageSize
和selectedPageOrientation
。 - 一个按钮,点击时触发
exportToPDF
方法进行 PDF 导出操作。 - 一个
div
元素,其id
为contentToExport
,该元素内的内容将被导出为 PDF。
- 两个
-
脚本部分(
<script>
):data
函数返回两个数据项,分别存储用户选择的页面大小和页面方向。exportToPDF
方法是核心逻辑:- 使用
document.getElementById
获取要导出的 HTML 元素。 - 调用
html2canvas
将 HTML 元素转换为 canvas 图像,并将其转换为 base64 编码的 PNG 图片数据。 - 根据用户选择的页面大小和方向创建
jsPDF
实例。 - 计算图像的宽度和高度,使其按比例适应页面。
- 将图像添加到 PDF 中,如果图像高度超过一页,进行分页处理。
- 最后使用
pdf.save
方法保存 PDF 文件。
- 使用
-
样式部分(
<style>
):- 为
#contentToExport
元素添加了一些样式,使其在页面上有边框和内边距。
- 为
使用方法
将上述代码保存为一个 Vue 组件(例如 ExportPDF.vue
),然后在其他组件中引入并使用:
<template><div><ExportPDF /></div>
</template><script>
import ExportPDF from './ExportPDF.vue';export default {components: {ExportPDF}
};
</script>
相关文章:
Vue组件开发-使用 html2canvas 和 jspdf 库实现PDF文件导出 设置页面大小及方向
在 Vue 项目中实现导出 PDF 文件、调整文件页面大小和页面方向的功能,使用 html2canvas 将 HTML 内容转换为图片,再使用 jspdf 把图片添加到 PDF 文件中。以下是详细的实现步骤和代码示例: 步骤 1:安装依赖 首先,在项…...

chrome插件:网页图片高清下载
前置条件: 安装有chrome谷歌浏览器的电脑 使用步骤: 1.打开chrome扩展插件 2.点击管理扩展程序 3.加载已解压的扩展程序 4.选择对应文件夹 5.成功后会出现一个扩展小程序 6.点击对应小程序 7.输入需要访问的网址,点击扩展插件即可进行图片…...

汽车定速巡航
配备定速巡航功能的车型,一般在方向盘附近设有4~6个按键(可能共用键位)。 要设置定速巡航,不仅需要方向盘上的按键,还要油门配合。 设置的一般流程: 开关:类似步枪上的“保险”,按…...

CNN-BiLSTM卷积双向长短期记忆神经网络时间序列预测(Matlab完整源码和数据)
CNN-BiLSTM卷积双向长短期记忆神经网络时间序列预测(Matlab完整源码和数据) 目录 CNN-BiLSTM卷积双向长短期记忆神经网络时间序列预测(Matlab完整源码和数据)预测效果基本介绍 CNN-BiLSTM卷积双向长短期记忆神经网络时间序列预测一…...

WPF基础 | WPF 布局系统深度剖析:从 Grid 到 StackPanel
WPF基础 | WPF 布局系统深度剖析:从 Grid 到 StackPanel 一、前言二、Grid 布局:万能的布局王者2.1 Grid 布局基础:构建网格世界2.2 子元素定位与跨行列:布局的精细操控2.3 自适应布局:灵活应变的秘诀 三、StackPanel…...

14-6-2C++STL的list
(一)list对象的带参数构造 1.list(elem);//构造函数将n个elem拷贝给本身 #include <iostream> #include <list> using namespace std; int main() { list<int> lst(3,7); list<int>::iterator it; for(itlst.begi…...

【AI论文】Sigma:对查询、键和值进行差分缩放,以实现高效语言模型
摘要:我们推出了Sigma,这是一个专为系统领域设计的高效大型语言模型,其独特之处在于采用了包括DiffQKV注意力机制在内的新型架构,并在我们精心收集的系统领域数据上进行了预训练。DiffQKV注意力机制通过根据查询(Q&…...

私域流量池构建与转化策略:以开源链动2+1模式AI智能名片S2B2C商城小程序为例
摘要:随着互联网技术的快速发展,流量已成为企业竞争的关键资源。私域流量池,作为提升用户转化率和增强用户粘性的有效手段,正逐渐受到企业的广泛关注。本文旨在深入探讨私域流量池构建的目的、优势及其在实际应用中的策略…...

vofa++使用方法
控件区可以添加控件用来啊多样显示 点击一个控件然后右键可以选择要添加显示的数据,点all表全部显示, 点auto可以自动布局 要用控件需要选择协议,不知道协议具体格式可以点击问号看看,并且最好用printf重定义来实现 比如我要实现F…...

LogicFlow 一款流程图编辑框架
LogicFlow是什么 LogicFlow是一款流程图编辑框架,提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端自定义开发各种逻辑编排场景,如流程图、ER图、BPMN流程等。在工作审批流配置、机器人逻辑编排、无代码…...

HTML<kbd>标签
例子 在文档中将一些文本定义为键盘输入: <p>Press <kbd>Ctrl</kbd> <kbd>C</kbd> to copy text (Windows).</p> <p>Press <kbd>Cmd</kbd> <kbd>C</kbd> to copy text (Mac OS).</p>…...

PyQt6医疗多模态大语言模型(MLLM)实用系统框架构建初探(上.文章部分)
一、引言 1.1 研究背景与意义 在数字化时代,医疗行业正经历着深刻的变革,智能化技术的应用为其带来了前所未有的发展机遇。随着医疗数据的指数级增长,传统的医疗诊断和治疗方式逐渐难以满足现代医疗的需求。据统计,全球医疗数据量预计每年以 48% 的速度增长,到 2025 年将…...

150 Linux 网络编程6 ,从socket 到 epoll整理。listen函数参数再研究
一 . 只能被一个client 链接 socket例子 此例子用于socket 例子, 该例子只能用于一个客户端连接server。 不能用于多个client 连接 server socket_server_support_one_clientconnect.c /* 此例子用于socket 例子, 该例子只能用于一个客户端连接server。…...
深入浅出 SQLSugar:快速掌握高效 .NET ORM 框架
SQLSugar 是一个高效、易用的 .NET ORM 框架,支持多种数据库(如 SQL Server、MySQL、PostgreSQL 等)。它提供了丰富的功能,包括 CRUD 操作、事务管理、动态表名、多表联查等,开发者可以通过简单的链式操作实现复杂的数…...

ESP8266 NodeMCU与WS2812灯带:实现多种花样变换
在现代电子创意项目中,LED灯带的应用已经变得极为广泛。通过结合ESP8266 NodeMCU的强大处理能力和FastLED库的高效功能,我们可以轻松实现多达100种灯带变换效果。本文将详细介绍如何使用Arduino IDE编程,实现从基础到高级的灯光效果ÿ…...

MacOS安装Docker battery-historian
文章目录 需求安装battery-historian实测配置国内源相关文章 需求 分析Android电池耗电情况、唤醒、doze状态等都要用battery-historian, 在 MacOS 上安装 battery-historian,可以使用 Docker 进行安装runcare/battery-historian:latest。装完不需要做任…...

Linux的基本指令(上)
1.ls指令 语法:ls [选项] [目录或文件] 功能:对于⽬录,该命令列出该⽬录下的所有⼦⽬录与⽂件。对于⽂件,将列出⽂件名以及其他信息。 常用选项: -a 列出⽬录下的所有⽂件,包括以 . 开头的隐含⽂件。 -d 将…...

【Numpy核心编程攻略:Python数据处理、分析详解与科学计算】1.1 从零搭建NumPy环境:安装指南与初体验
1. 从零搭建NumPy环境:安装指南与初体验 NumPy核心能力图解(架构图) NumPy 是 Python 中用于科学计算的核心库,它提供了高效的多维数组对象以及用于处理这些数组的各种操作。NumPy 的核心能力可以概括为以下几个方面:…...

ASP .NET Core 学习(.NET9)部署(一)windows
在windows部署 ASP .NET Core 的时候IIS是不二选择 一、IIS安装 不论是在window7 、w10还是Windows Server,都是十分简单的,下面以Windows10为例 打开控制面版—程序—启用或关闭Windows功能 勾选图中的两项,其中的子项看需求自行勾选&am…...
百日计划(2025年1月22日-4月30日,以完成ue4.0 shader抄写为目标)
目前遇到三个现象: 1,以前都是以跳槽为目标学习技术,但是目前工作难找,所以失去方向,有点迷茫了。 2,对于一项完整的内容,月计划时间不够用,如果工作上一扰乱,就又虎头蛇…...

智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
适应性Java用于现代 API:REST、GraphQL 和事件驱动
在快速发展的软件开发领域,REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名,不断适应这些现代范式的需求。随着不断发展的生态系统,Java 在现代 API 方…...

企业大模型服务合规指南:深度解析备案与登记制度
伴随AI技术的爆炸式发展,尤其是大模型(LLM)在各行各业的深度应用和整合,企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者,还是积极拥抱AI转型的传统企业,在面向公众…...

数据结构第5章:树和二叉树完全指南(自整理详细图文笔记)
名人说:莫道桑榆晚,为霞尚满天。——刘禹锡(刘梦得,诗豪) 原创笔记:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 上一篇:《数据结构第4章 数组和广义表》…...
WEB3全栈开发——面试专业技能点P4数据库
一、mysql2 原生驱动及其连接机制 概念介绍 mysql2 是 Node.js 环境中广泛使用的 MySQL 客户端库,基于 mysql 库改进而来,具有更好的性能、Promise 支持、流式查询、二进制数据处理能力等。 主要特点: 支持 Promise / async-await…...