vue3页面导出为PDF文件

vue3页面导出为PDF文件

尝试了很多方法,都没有找到完美的解决方法

目前网上有个思路,就是将页面先转存为图片,然后将图片另存为PDF文件

记录一下完整过程

一、安装必备包

安装两个第三方插件

npm i html2canvas
npm i jspdf

html2canvas,作用显而易见,将html转为canvas画布

jspdf是js程序中操作pdf的包

二、封装导出PDF的方法

在vue3项目中,我一般放在src/utils目录下

新建htmlToPDF.js文件,代码如下:

// 页面导出为pdf格式
import html2Canvas from "html2canvas";
import jsPDF from "jspdf";const htmlToPdf = {getPdf(title, id) {html2Canvas(document.querySelector(id), {allowTaint: false,taintTest: false,logging: false,useCORS: true,dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍scale: 4, //按比例增加分辨率}).then((canvas) => {var pdf = new jsPDF("p", "mm", "a4"); //A4纸,纵向var ctx = canvas.getContext("2d"),a4w = 190,a4h = 272, //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度renderedHeight = 0;while (renderedHeight < canvas.height) {var page = document.createElement("canvas");page.width = canvas.width;page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页//用getImageData剪裁指定区域,并画到前面创建的canvas对象中page.getContext("2d").putImageData(ctx.getImageData(0,renderedHeight,canvas.width,Math.min(imgHeight, canvas.height - renderedHeight)),0,0);pdf.addImage(page.toDataURL("image/jpeg", 1.0),"JPEG",10,10,a4w,Math.min(a4h, (a4w * page.height) / page.width)); //添加图像到页面,保留10mm边距renderedHeight += imgHeight;if (renderedHeight < canvas.height) {pdf.addPage(); //如果后面还有内容,添加一个空页}// delete page;}pdf.save(title + ".pdf");});},
};export default htmlToPdf;

三、页面调用

直接上代码

<template><div style="position: relative;"><div class="report" id="report">需要存为PDF的内容</div>	<div class="output" @click="printReport">导出此报告</div></div>
</template><script>
import htmlToPdf from "@/utils/htmlToPDF";
const printReport = () => {htmlToPdf.getPdf('周期报告',"#report");
}          
</script><style lang="scss" scoped>
.report {position: relative;padding: 20px 500px;display: flex;justify-content: space-between;flex-direction: column;height: 100%;width: 100%;background-color: #eee;
}.output {top: 20px;left: 500px;width: 100px;height: 40px;background-color: #2177b8;position: absolute;border-radius: 10px;color: #fff;display: flex;align-items: center;justify-content: center;cursor: pointer;
}
</style>

调用函数时,需要传入导出PDF文件的文件名和要导出内容的dom的id

亲测,可以成功导出,但适配的是A4纸,在分页的地方比较难看,如下:

image-20240411145310375

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

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

相关文章

Meta宣布全新训推一体加速器:完全集成PyTorch 2,性能3倍提升

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了免费的人工智能中文站https://ai.weoknow.com 新建了收费的人工智能中文站https://ai.hzytsoft.cn/ 更多资源欢迎关注 Meta 疯狂砸入数十亿美元&#xff0c;一部分招揽人才&#xff0c;一部分造芯片。 Meta 正在不…

Redis 主从复制实现

Redis 主从复制实现 第一次同步命令传播分摊主服务器的压力增量复制 第一次同步 第一阶段&#xff1a;建立链接、协商同步(为全量复制做准备) 执行了 replicaof 命令后&#xff0c;从服务器就会给主服务器发送 psync 命令&#xff0c;表示要进行数据同步。psync 命令包含两个参…

Java List基础篇

目录 前言一、常用List1.1 List1.1.1 特点1.1.2 常用API 1.2 ArrayList1.2.1 特点1.2.2 使用 1.3 LinkedList1.3.1 特点1.3.2 使用 1.4 CopyOnWriteArrayList1.4.1 特点1.4.2 使用 1.5 Arrays.asList()1.5.1 特点1.5.2 使用 二、对比总结 前言 一、常用List 1.1 List List是…

贪心算法:排列算式

题目描述 给出n数字&#xff0c;对于这些数字是否存在一种计算顺序&#xff0c;使得计算过程中数字不会超过3也不会小于0&#xff1f; 输入描述: 首行给出一个正整数t,(1≤t≤1000)代表测试数据组数每组测试数据第一行一个正整数n,(1≤n≤500)第二行包含n个以空格分隔的数字…

基于python的天气数据可视化系统、Flask框架,爬虫采集天气数据,可视化分析

系统介绍 基于Python的天气预测可视化分析系统&#xff0c;该项目的主要流程和功能包括&#xff1a; 数据获取&#xff1a; 使用Python的pandas库从2345天气网&#xff08;http://tianqi.2345.com/Pc/GetHistory&#xff09;抓取山东省各市区县在2021年至2023年间的天气历史数…

实况窗助力美团打造鸿蒙原生外卖新体验,用户可实时掌握外卖进展

自2023年华为宣布全新HarmonyOS NEXT蓄势待发&#xff0c;鸿蒙原生应用全面启动以来&#xff0c;已有金融、旅行、社交等多个领域的企业和开发者陆续宣布加入鸿蒙生态。其中&#xff0c;美团作为国内头部的科技零售企业&#xff0c;是首批加入鸿蒙生态的伙伴&#xff0c;其下的…

【C 数据结构】静态链表

文章目录 【 1. 基本原理 】1.1 静态链表中的节点1.2 备用链表 【 2. 静态链表的创建 】2.1 实例1 - 创建静态链表&#xff0c;指定值2.2 实例2 - 创建静态链表&#xff0c;默认值 【 3. 静态链表 添加元素 】【 4. 静态链表 删除元素 】【 5. 静态链表 查找元素 】【 6. 静态链…

机器人方向控制中应用的磁阻角度传感芯片

磁阻传感器提供的输出信号几乎不受磁场变动、磁温度系数、磁传感器距离与位置变动影响&#xff0c;可以达到高准确度与高效能&#xff0c;因此相当适合各种要求严格的车用电子与工业控制的应用。所以它远比采用其它传感方法的器件更具有优势。 机器人的应用日渐广泛&#xff0…

【ELFK】Filebeat+ELK 部署

FilebeatELK 部署 Node1节点&#xff08;2C/4G&#xff09;&#xff1a;node1/192.168.67.11 Elasticsearch Kibana Node2节点&#xff08;2C/4G&#xff09;&#xff1a;node2/192.168.67.12 Elasticsearch Apache节点&#xff1a;apache/192.168.67.10 …

如何编译OpenHarmony自带APP

作者&#xff1a;王石 概述 OpenHarmony 的主干代码是开源社区的重要学习资源&#xff0c;对于想进行应用开发和熟悉 OpenHarmony 能力的同学主干代码是非常重要的资源&#xff0c;在主干代码的 applications 目录里聚集了很多原生的应用实现&#xff0c;那么如何编译这些代码…

【图论】Dijkstra单源最短路径-朴素方法-简单模板(迪杰斯特拉算法)

Dijkstra单源最短路径 问题描述 输入n 表示n个结点&#xff0c;m表示m条边&#xff0c;求编号1的结点到每个点的最短路径 输出从第一个点到第n个点的最短路径 思路 将图g[][]中所有的权值初始化为0x3f表示正无穷 将dist[]中所有的值初始化为0x3f表示从第一个点到所有点的距离…

【域适应】基于域分离网络的MNIST数据10分类典型方法实现

关于 大规模数据收集和注释的成本通常使得将机器学习算法应用于新任务或数据集变得异常昂贵。规避这一成本的一种方法是在合成数据上训练模型&#xff0c;其中自动提供注释。尽管它们很有吸引力&#xff0c;但此类模型通常无法从合成图像推广到真实图像&#xff0c;因此需要域…