Vue+ElementUI 导出为PDF文件

在ElementUI中导出PDF通常涉及将页面上的DOM元素转换为PDF格式的文件。这一过程可以通过结合使用 html2canvas 和 jsPDF 这两个JavaScript库来实现。

步骤:
1、安装依赖

在项目中安装html2canvas和jsPDF这两个库。可以通过npm进行安装:

npm install html2canvas jspdf
2、创建导出函数

创建一个JavaScript文件(例如 htmlToPdf.js),并在其中定义导出PDF的函数。以下是一个示例函数:

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';export function getPdf(elementId, pdfName) {const element = document.getElementById(elementId);html2canvas(element, {useCORS: true, // 允许跨域请求外部链接图片allowTaint: true // 允许canvas污染}).then(canvas => {const contentWidth = canvas.width;const contentHeight = canvas.height;const pageHeight = contentWidth / 592.28 * 841.89;let leftHeight = contentHeight;let position = 0;const imgWidth = 595.28;const imgHeight = (contentHeight * imgWidth) / contentWidth;const pageData = canvas.toDataURL('image/jpeg', 1.0);const pdf = new jsPDF('', 'pt', 'a4');if (leftHeight < pageHeight) {pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);} else {while (leftHeight > 0) {pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);leftHeight -= pageHeight;position -= 841.89;if (leftHeight > 0) {pdf.addPage();}}}pdf.save(pdfName + '.pdf');}).catch(error => {console.error('Error during PDF generation:', error);});
}
3、在Vue组件中使用

在需要导出PDF的Vue组件中引入并使用这个函数。

例如:

<template><div><!-- 要导出的内容 --><div id="exportContent"><!-- 这里放置要导出的HTML内容 --></div><!-- 导出按钮 --><el-button type="primary" @click="exportPdf">导出PDF</el-button></div>
</template><script>
import { getPdf } from './htmlToPdf'; // 引入导出的函数export default {methods: {exportPdf() {getPdf('exportContent', '导出的文件名'); // 调用导出函数,并传入要导出的DOM元素的ID和PDF文件名}}
}
</script>
4、注意事项
  • 分页处理:如果导出的内容超过一页,需要处理分页逻辑。上面的示例代码中已经包含了分页处理的逻辑。
  • 样式调整:为了确保导出的PDF文件样式正确,可能需要对要导出的DOM元素进行样式调整。例如,可以使用CSS来控制元素的布局和样式。
  • 跨域问题:如果导出的内容中包含跨域的图片或其他资源,需要确保服务器允许跨域请求,或者在html2canvas的配置中设置useCORS:
    true。
  • 滚动条处理:如果导出的内容在页面中存在滚动条,需要确保在生成PDF时能够正确处理滚动条的位置和大小。

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

23种设计模式-备忘录(Memento)设计模式

文章目录 一.什么是备忘录设计模式&#xff1f;二.备忘录模式的特点三.备忘录模式的结构四.备忘录模式的优缺点五.备忘录模式的 C 实现六.备忘录模式的 Java 实现七.总结 类图&#xff1a; 备忘录设计模式类图 一.什么是备忘录设计模式&#xff1f; 备忘录设计模式&#xff08…

如何删除pdf里的任意一页?删除PDF里任意一页的几种方法

如何删除pdf里的任意一页&#xff1f;尽管PDF文件具有许多优点&#xff0c;如跨平台兼容性和格式保真性&#xff0c;但在编辑和修改方面&#xff0c;它与像Word或Excel这类文档格式不同&#xff0c;通常不能像其他文档那样轻松进行直接的内容删除或修改。这让很多人以为&#x…

css3新特性(二十六课)

1、css3盒子模型 box - sizing: content - box&#xff1b; 是 CSS 中用于定义盒模型宽度和高度计算方式的一个属性值。在这种盒模型下&#xff0c;元素的宽度和高度&#xff08;width和height属性&#xff09;仅包括内容区域&#xff08;content&#xff09;的大小&#xff…

Centos7安装Jenkins脚本一键部署

公司原先Jenkins二进制安装&#xff0c;自己闲来无事在测试主机优化了一下&#xff0c;一键部署&#xff0c;jenkins2.426版本jdk11版本 #!/bin/bashjenkins_file"jenkins-2.426.3-1.1.noarch.rpm"# 更新软件包列表 echo "更新软件包列表..." sudo yum up…

类与对象(c++)——取地址运算符重载,初始化列表,类型转换

1.取地址运算符重载 1.1 const成员函数 a)将const修饰的成员函数称之为const成员函数&#xff0c;const修饰成员函数放到成员函数参数列表的后 ⾯。 b)const实际修饰该成员函数隐含的this指针&#xff0c;表明在该成员函数中不能对类的任何成员进⾏修改。 const 修饰Date类的…

形态学图像处理(Morphological Image Processing)

形态学图像处理(Morphological Image Processing) 前言 ‍ 本博客为个人总结数字图像处理一课所写&#xff0c;并给出适当的扩展和相应的demo。 写博客跟做 checkpoint​ 很像&#xff0c;毕竟个人还不能达到那种信手拈来的境界&#xff0c;忘了就是从零开始训练&#xff0…

如何在K8s集群中管理与使用GPU

背景 随着人工智能的兴起&#xff0c;GPU作为重要的智算算力类型愈发受到重视&#xff0c;而Kubernetes&#xff08;k8s&#xff09;作为业界主流的集群管理系统&#xff0c;如何方便管理、使用GPU也是其需要解决的一大问题&#xff0c;故此收集整理了K8s管理与使用GPU的相关资…

kubepi管理k8s集群,演示如何连接阿里云k8s容器

一、背景 对k8s容器运维的过程中&#xff0c;如果是自建k8s的话&#xff0c;一般会安装dashboard&#xff0c;方便管理&#xff1b;如果是阿里云k8s容器&#xff0c;它是有提供web ui&#xff0c;但是它有个不便之处–需要定期登录&#xff0c;且缺少命令控制台。 当你需要使…

Conda 安装纯净版ComfyUI

网上有很多整合包&#xff0c; 我个人喜欢纯净版&#xff0c; 自已搭建 1 拉代码 git clone https://github.com/comfyanonymous/ComfyUI 如果没有装过git,下载安装: https://git-scm.com/ https://git-lfs.com/ 2 创建环境 cd ComfyUI conda create -n ComfyUI python3.11…

LeetCode:700. 二叉搜索树中的搜索

目录 题目描述: 代码: 题目描述: 给定二叉搜索树&#xff08;BST&#xff09;的根节点 root 和一个整数值 val。 你需要在 BST 中找到节点值等于 val 的节点。 返回以该节点为根的子树。 如果节点不存在&#xff0c;则返回 null 。 示例 1: 输入&#xff1a;root [4,2,7,1,3…

摄影:相机控色

摄影&#xff1a;相机控色 白平衡&#xff08;White Balance&#xff09;白平衡的作用&#xff1a; 白平衡的使用环境色温下相机色温下总结 白平衡偏移与包围白平衡包围 影调 白平衡&#xff08;White Balance&#xff09; 人眼看到的白色&#xff1a;会自动适应环境光线。 相…

【大选】2024年美国总统选举数据分析可视化

前言 • &#x1f453; 可视化主要使用 Plotly • &#x1f50e; 数据处理主要使用 pandas • &#x1f449; 本文是我自己在和鲸社区的原创 1.项目背景描述 2024年美国大选是该国政治生活中的重要事件&#xff0c;吸引了全球的关注。本报告通过对选举数据的分析&#xff0c…

Linux进阶:常用操作

systemctl&#xff1a; 控制系统服务的启动、关闭 系统内置服务均可被systemctl控制第三方软件&#xff0c;如果自动注册了可以被systemctl控制第三方软件&#xff0c;如果没有自动注册&#xff0c;可以手动注册 语法&#xff1a;systemctl start | stop | restart | disable…

JVM类加载过程-Loading

一、Class对象的生命周期 .class文件是如何加载到内存中:.class文件是ClassLoader通过IO将文件读到内存,再通过双亲委派的模式进行Loading,再Linking、以及Initializing,代码调用等一系列操作后,进行GC,组成完整的生命周期; 二、双亲委派模式(Loading的过程): 1、类…

002创建ASP.NET Core项目-数据库优先

创建数据库和表 创建数据库和表 添加关系 Product表引用Category 创建ASP.NET Core Web项目 根据数据库创建Models 在【程序包管理器控制台输入命令】 Scaffold-DbContext Data Source.;Initial Catalogshopdb;Usersa;Password123456;TrustServerCertificatetrue’Microso…

探究IOC容器刷新环节初始化前的预处理

目录 一、IOC容器的刷新环节快速回顾 二、初始化前的预处理prepareRefresh源码分析 三、初始化属性源 &#xff08;一&#xff09;GenericWebApplicationContext初始化属性源 &#xff08;二&#xff09;StaticWebApplicationContext初始化属性源 四、初始化早期事件集合…

25.UE5时间膨胀,慢动作,切换地图,刷BOSS

2-27 时间膨胀、慢动作、切换地图、刷BOSS_哔哩哔哩_bilibili 目录 1.刷新BOSS逻辑 2.时间膨胀实现慢动作 3.胜利画面&#xff0c;下一关 3.1胜利画面UI 3.2第一关、第二关游戏模式 3.3下一关按钮事件的绑定 1.刷新BOSS逻辑 实现当场上的怪物都死亡后&#xff0c;进行刷…

自己编写的前后端分离程序,解决跨域问题

跨域问题在前端解决很麻烦&#xff0c;既然前后端都是自己编写的&#xff0c;就直接在后端解决了。 1. 后端中 在controller文件中加上 CrossOrigin // 解决跨域问题&#xff0c;不加的话虽然数据能正常传输&#xff0c;但是前端页面会没有正常响应 2. 前端中 可以正常访问…

小米顾此失彼:汽车毛利大增,手机却跌至低谷

科技新知 原创作者丨依蔓 编辑丨蕨影 三年磨一剑的小米汽车毛利率大增&#xff0c;手机业务毛利率却出现下滑景象。 11月18日&#xff0c;小米集团发布 2024年第三季度财报&#xff0c;公司实现营收925.1亿元&#xff0c;同比增长30.5%&#xff0c;预估902.8亿元&#xff1b;…

E45.【C语言】练习:输入10个整数查找找并打印不相同的数字及个数

1.题目 输入10个整数查找找并打印不相同的数字及个数 输入示例 数组元素个数:10 20 50 30 10 60 90 70 30 10 20 输出示例 20 50 30 10 60 90 70 一共7个 2.初始代码 和E27.【C语言】练习&#xff1a;在一个整型数组中&#xff0c;只有一个数字出现一次&#xff0c;其他数…