Vue组件开发-使用 html2canvas 和 jspdf 库实现PDF文件导出 设置页面大小及方向

在 Vue 项目中实现导出 PDF 文件、调整文件页面大小和页面方向的功能,使用 html2canvas 将 HTML 内容转换为图片,再使用 jspdf 把图片添加到 PDF 文件中。以下是详细的实现步骤和代码示例:

步骤 1:安装依赖

首先,在项目中安装 html2canvasjspdf

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>

代码解释

  1. 模板部分(<template>

    • 两个 select 元素分别用于选择页面大小和页面方向,通过 v-model 指令绑定到组件的数据 selectedPageSizeselectedPageOrientation
    • 一个按钮,点击时触发 exportToPDF 方法进行 PDF 导出操作。
    • 一个 div 元素,其 idcontentToExport,该元素内的内容将被导出为 PDF。
  2. 脚本部分(<script>

    • data 函数返回两个数据项,分别存储用户选择的页面大小和页面方向。
    • exportToPDF 方法是核心逻辑:
      • 使用 document.getElementById 获取要导出的 HTML 元素。
      • 调用 html2canvas 将 HTML 元素转换为 canvas 图像,并将其转换为 base64 编码的 PNG 图片数据。
      • 根据用户选择的页面大小和方向创建 jsPDF 实例。
      • 计算图像的宽度和高度,使其按比例适应页面。
      • 将图像添加到 PDF 中,如果图像高度超过一页,进行分页处理。
      • 最后使用 pdf.save 方法保存 PDF 文件。
  3. 样式部分(<style>

    • #contentToExport 元素添加了一些样式,使其在页面上有边框和内边距。

使用方法

将上述代码保存为一个 Vue 组件(例如 ExportPDF.vue),然后在其他组件中引入并使用:

<template><div><ExportPDF /></div>
</template><script>
import ExportPDF from './ExportPDF.vue';export default {components: {ExportPDF}
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/69238.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RV1126+FFMPEG推流项目源码

源码在我的gitee上面&#xff0c;感兴趣的可以自行了解 nullhttps://gitee.com/x-lan/rv126-ffmpeg-streaming-projecthttps://gitee.com/x-lan/rv126-ffmpeg-streaming-project

宏_wps_宏修改word中所有excel表格的格式_设置字体对齐格式_删除空行等

需求&#xff1a; 将word中所有excel表格的格式进行统一化&#xff0c;修改其中的数字类型为“宋体&#xff0c; 五号&#xff0c;右对齐&#xff0c; 不加粗&#xff0c;不倾斜”&#xff0c;其中的中文为“宋体&#xff0c; 五号&#xff0c; 不加粗&#xff0c;不倾斜” 数…

ServletOutputStream failed to write: Broken pipe

案发现场 问题&#xff1a; org.springframework.web.context.request.async.AsyncRequestNotUsableException: ServletOutputStream failed to write: Broken pipe org.springframework.web.context.request.async.AsyncRequestNotUsableException: ServletOutputStream …

CNN-BiLSTM卷积双向长短期记忆神经网络时间序列预测(Matlab完整源码和数据)

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

14-6-2C++STL的list

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

Docker 系列之 docker-compose 容器编排详解

文章目录 前言一、Docker-compose简介二、Docker-compose 的安装三、Docker-compose卸载四、Docker-compose常用命令4.1 Docker-compose命令格式4.2 docker-compose up4.3 docker-compose ps4.4 docker-compose stop4.5 docker-compose -h4.6 docker-compose down4.7 docker-co…

React第二十五章(受控组件/非受控组件)

React 受控组件理解和应用 React 受控组件 受控组件一般是指表单元素&#xff0c;表单的数据由React的 State 管理&#xff0c;更新数据时&#xff0c;需要手动调用setState()方法&#xff0c;更新数据。因为React没有类似于Vue的v-model&#xff0c;所以需要自己实现绑定事件…

转换算术表达式

文章目录 构造二叉树表示的算术表达式&#xff1a;按先序次序输入二叉树中结点的值(操作数及运算符均以一位字符表示&#xff0c;注意转换)&#xff0c; #字符表示空树&#xff0c;如上图的算术表达式 输入2##*3##4## 输入格式 第一行输入表示要计算的算术表达式的二叉树结点的…

[b01lers2020]Life on Mars1

打开题目页面如下 看了旁边的链接&#xff0c;也没有什么注入点&#xff0c;是正常的科普 利用burp suite抓包&#xff0c;发现传参 访问一下 http://5edaec92-dd87-4fec-b0e3-501ff24d3650.node5.buuoj.cn:81/query?searchtharsis_rise 接下来进行sql注入 方法一&#xf…

Linux的udev详解、安装和使用(dev下的设备每次开机的名称不固定怎么办?)

前言&#xff08;问题与需求&#xff09;&#xff1a; 在传统的devfs 1&#xff1a;设备映射的不确定&#xff1a;一个设备多次加载设备的设备文件可能不同&#xff0c;比如一个hub有可能是ttyUSB0或ttyUSB2或ttyUSB3 2&#xff1a;devfs没有足够的主辅设备号&#xff0c;当设…

Linux 内核中的 InfiniBand 核心模块:drivers/infiniband/core/device.c 分析

InfiniBand 是一种高性能、低延迟的网络互连技术,广泛应用于高性能计算(HPC)、数据中心和云计算等领域。Linux 内核中的 InfiniBand 子系统提供了对 InfiniBand 设备的支持,而 drivers/infiniband/core/device.c 文件则是 InfiniBand 核心模块的重要组成部分。本文将对 dev…

如何快速开发LabVIEW项目,成为LabVIEW开发的高手

发现了一篇多年前写的文章&#xff0c;转发到这里 如何快速开发LabVIEW项目&#xff0c;成为LabVIEW开发的高手。 如果您手里有LabVIEW项目&#xff0c;领导催的又很紧&#xff0c;该怎么办&#xff1f; 如果您公司规模小&#xff0c;就想把LabVIEW项目快速搞定&#xff0c;有什…

Zookeeper(27)Zookeeper的CAP理论是什么?

CAP 理论&#xff0c;又称为 Brewer 定理&#xff0c;是分布式系统设计中的一个基本定理。CAP 代表一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;和分区容忍性&#xff08;Partition Tolerance&#xff09;。该理论指出&#xff0c;…

CodeForces 611:New Year and Domino ← 二维前缀和

【题目来源】 https://codeforces.com/contest/611/problem/C 【题目描述】 They say "years are like dominoes, tumbling one after the other". But would a year fit into a grid? I dont think so. Limak is a little polar bear who loves to play. He has r…

数组

数组 栈区的空间很有限&#xff0c;静态区的空间大些&#xff0c;一般在静态区去申请较大的空间 考虑特例能不能归并到一起也很重要 在二维数组中&#xff0c;基于范围的 for 循环直接遍历的是行&#xff0c;而不是单个元素 对于一个 int arr[3][4] 的二维数组&#xff0c; m…

网易Android开发面试题200道及参考答案 (下)

说明原码、反码、补码的概念 原码:是一种简单的机器数表示法。对于有符号数,最高位为符号位,0 表示正数,1 表示负数,其余位表示数值的绝对值。比如,对于 8 位二进制数,+5 的原码是 00000101,-5 的原码是 10000101。原码的优点是直观,容易理解,但在进行加减法运算时,…

K8S中的数据存储之基本存储

基本存储类型 EmptyDir 描述&#xff1a;当 Pod 被调度到节点上时&#xff0c;Kubernetes 会为 Pod 创建一个空目录&#xff0c;所有在该 Pod 中的容器都可以访问这个目录。特点&#xff1a; 生命周期与 Pod 绑定&#xff0c;Pod 删除时&#xff0c;数据也会丢失。适用于临时…

如何移植ftp服务器到arm板子?

很多厂家提供的sdk&#xff0c;一般都不自带ftp服务器功能&#xff0c; 需要要发人员自己移植ftp服务器程序。 本文手把手教大家如何移植ftp server到arm板子。 环境 sdk&#xff1a;复旦微 Buildroot 2018.02.31. 解压 $ mkdir ~/vsftpd $ cp vsftpd-3.0.2.tar.gz ~/vs…

Alfresco Content Services docker自动化部署操作

Alfresco Content Services docker部署文档 前提条件 在开始之前&#xff0c;需要确保已经安装了 Docker 和 Docker Compose。Docker 用于创建和管理容器&#xff0c;Docker Compose 则用于定义和运行多容器的 Docker 应用。 步骤 1. 创建目录结构 首先&#xff0c;创建一个…

计算机网络 (61)移动IP

前言 移动IP&#xff08;Mobile IP&#xff09;是由Internet工程任务小组&#xff08;Internet Engineering Task Force&#xff0c;IETF&#xff09;提出的一个协议&#xff0c;旨在解决移动设备在不同网络间切换时的通信问题&#xff0c;确保移动设备可以在离开原有网络或子网…