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,对于一项完整的内容,月计划时间不够用,如果工作上一扰乱,就又虎头蛇…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

大数据零基础学习day1之环境准备和大数据初步理解
学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 (1)设置网关 打开VMware虚拟机,点击编辑…...
pam_env.so模块配置解析
在PAM(Pluggable Authentication Modules)配置中, /etc/pam.d/su 文件相关配置含义如下: 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块,负责验证用户身份&am…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2
每日一言 今天的每一份坚持,都是在为未来积攒底气。 案例:OLED显示一个A 这边观察到一个点,怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 : 如果代码里信号切换太快(比如 SDA 刚变,SCL 立刻变&#…...

Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...