vue项目纯前端实现导出pdf文件

1、下载插件

npm install html2canvas
npm install jspdf

2、创建htmlToPdf.js,地址:src/utils/htmlToPdf.js

import html2Canvas from 'html2Canvas'  
import JsPDF from 'jspdf'  export default {  install(Vue, options) {  Vue.prototype.getPdfFromHtml = function (eleId, pdfFileName, hide) {  // 确保传入了正确的元素ID  const ele = document.getElementById(eleId);  if (!ele) {  console.error('No element found with ID:', eleId);  return;  }  pdfFileName = pdfFileName || "pdf";  // 滚动置顶(如果需要)  window.pageYOffset = 0; // 或者使用 window.scrollTo(0, 0);  // ... 其他可能的滚动设置(如果有)  // 使用html2canvas捕获元素并转换为canvas  html2Canvas(ele, {  dpi: window.devicePixelRatio * 2, // 根据需要调整DPI  useCORS: true, // 允许跨域图片  // ... 其他选项  }).then(canvas => {  // 隐藏加载消息(如果有)  this.$message.closeAll(); // 假设您使用的是Element UI的message组件  // 创建PDF文档并添加canvas内容  const pdf = new JsPDF('p', 'mm', 'a4'); // 使用A4纸,横向  const imgProps = pdf.getImageProperties(canvas.toDataURL('image/png'));  // 根据需要添加多页内容(如果需要)  let heightLeft = imgProps.height;  const top_left_margin = 10; // 您可以根据需要调整边距  const pdfWidth = pdf.internal.pageSize.getWidth() - 2*top_left_margin;  const pdfHeight = pdf.internal.pageSize.getHeight() - 2*top_left_margin;  while(heightLeft > 0) {  pdf.addImage(canvas.toDataURL('image/png'), 'PNG', top_left_margin, top_left_margin, pdfWidth, Math.min(pdfHeight, heightLeft));  if (heightLeft > pdfHeight) {  pdf.addPage();  }  heightLeft -= pdfHeight;  // 如果需要,可以在此处添加页眉/页脚等  }  // 保存PDF  pdf.save(pdfFileName + '.pdf');  }).catch(error => {  console.error('Error generating PDF:', error);  // 显示错误消息(如果需要)  this.$message.error('生成PDF时出错');  });  };  }  
};

3、main.js中引入

import htmlToPdf from './utils/htmlToPdf.js'Vue.use(htmlToPdf)

4、vue页面中使用

在需要打印的块元素上边添加id='pdfDom'

this.GetPdfFromHtml('pdfDom',this.name)

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

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

相关文章

小阿轩yx-MySQL索引、事务

小阿轩yx-MySQL索引、事务 MySQL 索引介绍 是一个排序的列表,存储着索引的值和包含这个值的数据所在行的物理地址数据很多时,索引可以大大加快查询的速度使用索引后可以不用扫描全表来定位某行的数据而是先通过索引表找到该行数据对应的物理地址然后访…

Ubuntu挂载window的网络共享文件夹爱

1.进入win10创建一个用户smb密码也是smb 2.右键进入文件夹共享 3.进入Ubuntu安装支持cifs-utils sudo apt update sudo apt install cifs-utils 4.sudo mkdir /mnt/shared 5.挂载: sudo mount -t cifs -o usernamesm bpasswordsmb //172.16.11.37(windowsIP)/s…

Android SurfaceFlinger——动画播放准备(十五)

BootAnimation 本质上是一个线程,执行 run 之后,会先执行 readyToRun,接着执行 treadLoop 方法。 一、线程启动 1、BootAnimation 源码位置:/frameworks/base/cmds/bootanimation/BootAnimation.cpp readyToRun status_t BootAnimation::readyToRun() {// 添加默认资源…

Postman接口测试工具的原理及应用详解(二)

本系列文章简介: 在当今软件开发的世界中,接口测试作为保证软件质量的重要一环,其重要性不言而喻。随着前后端分离开发模式的普及,接口测试已成为连接前后端开发的桥梁,确保前后端之间的数据交互准确无误。在这样的背景…

【Linux】修改dmesg输出的日志级别

修改dmesg输出的级别 要修改 /proc/sys/kernel/printk 文件的内容以更改 dmesg 输出的级别,可以通过命令行进行操作。这个文件包含四个值,分别代表内核消息的不同级别。通过修改这些值,可以控制内核消息的输出级别。 /proc/sys/kernel/prin…

controller不同的后端路径对应vue前端传递数据发送请求的方式

目录 案例一: 为什么使用post发送请求,参数依旧会被拼接带url上呢?这应该就是param 与data传参的区别。即param传参数参数会被拼接到url后,data会以请求体传递 补充:后端controller 参数上如果没写任何注解&#xff0c…

JVM专题十二:JVM 中的收集器二

上一篇JVM专题十一:JVM 中的收集器一咱们介绍了垃圾收集器的分类,已经主流的分代垃圾收集器重点看了CMS与三色标记算法,本篇咱们继续来看意G1、ZGC等。 G1收集器 G1(Garbage-First Garbage Collector)是一种服务器端的…

flask的基本使用1

【 一 】Flask介绍 python 界的web框架 -Django:大而全,使用率较高 :https://github.com/django/django -FastAPI:新项目选择使用它:https://github.com/tiangolo/fastapi -flask:公司一些小项目使用它&a…

如何提高软件APP质量的测试类型

如今,由于市场竞争非常激烈,移动应用质量至关重要。我们需要关注用户体验以及应用的性能。如果应用包含错误,应用评级就会下降,应用下载量也会下降。如果我们能使我们的应用没有错误,那么应用获得人气的机会就会增加。…

通过颜色传感器控制机械臂抓物体

目录 1 绪论 2整体设计方案 2.1 系统的介绍 2.2 抓取模块 2.2.1 机械臂的定义 2.2.2 机械臂的分类 2.2.3 机械臂的选用 2.3 颜色识别模块 2.3.1 颜色传感器识别原理 2.3.2 TCS3200简介 2.4 整体控制方案 3 颜色识别抓取系统的硬件设计 3.1 单片机选型及参数 3.2 系…

win11系统重装?正版系统Windows11安装重启!保姆级重装系统攻略!

随着科技的不断发展,Windows 11系统已经逐渐成为了众多电脑用户的新选择。然而,当当电脑出现严重故障、受到病毒攻击、软件冲突、系统升级失败、硬件更换或升级、系统性能下降或个性化需求等情况时,重装系统可能是一个有效的解决方案。本文将…

构建网络图 (JavaScript)

前序:在工作中难免有一些千奇百怪的需求,如果你遇到构建网络图,或者学习应对未来,请看这边文章,本文以代码为主。 网络图是数据可视化中实用而有效的工具,特别适用于说明复杂系统内的关系和连接。这些图表…

kaoYan-Composition

It is almost axiomatic(不证自明的、公理的) that cooperation can benefit us in many ways.First, cooperation can facilitate the communication between different people.Likewise, collaboration can offer us an opportunity to learn from eac…

mybatisplus的lambdaQuery()使用案例

一、常用 查询 // 方式一 条件是LearningLesson必须为LearningLessonServiceImpl的T LearningLesson lesson lambdaQuery().eq(LearningLesson::getUserId, userId).eq(LearningLesson::getStatus, LessonStatus.LEARNING.getValue()).orderByDesc(LearningLesson::getLates…

【十六】【QT开发应用】Menu菜单,contextMenuEvent,setContextMenuPolicy,addAction

在 Qt 框架中,QMenu 类用于创建和管理菜单。菜单是用户界面的一部分,可以包含多个选项或动作,用户可以选择这些选项来执行特定的功能。菜单通常显示在菜单栏、上下文菜单(右键菜单)或工具栏中。 基本用法 创建菜单对象…

深入解读一下 `com.google.android.material.appbar.CollapsingToolbarLayout`

简介 在现代 Android 应用中,提供流畅且美观的用户体验是非常重要的。CollapsingToolbarLayout 是 AndroidX库中 Material Components 的一部分,它提供了一种易于实现的可折叠工具栏效果,常用于提供视觉吸引力的标题栏和动画效果。 本文将详…

已解决Writing ‘modem_a‘FAILED (remote: ‘Operation not permitted‘

今天用可视化工具FastbootEnhance线刷,没有注意到日志报错,开机后黑屏,电脑能检测到是开机状态,电源键按下有声音。 排除线刷包问题,翻看FastbootEnhance的日志,它的日志放到记事本全屏方便观看&#xff0…

项目1111

中文显示姓名列和手机号 SELECT contact_name AS 姓名, contact_phone AS 手机号 FROM 2_公司id; 使用explain测试给出的查询语句,显示走了索引查询 EXPLAIN SELECT * FROM 7_订单数量 WHERE countid LIKE e%; 统计用户订单信息,查询所有用户的下单数量…

Prometheus中添加基本身份验证功能

在Prometheus中添加基本身份验证功能,可以按照以下步骤进行: 一、生成哈希密码 首先,需要安装bcrypt工具,用于生成哈希密码。这可以通过Python的bcrypt库来完成。如果未安装,可以使用pip进行安装。 创建一个Python脚…

Android性能优化——卡顿优化

文章目录 一、从XML到屏幕上的展示造成跳帧的因素有那些发现问题定位问题定位代码 一、从XML到屏幕上的展示 数据加载阶段 数据控制阶段 数据展示阶段 xml —> view onCreat —> 解析layout.xml resume —> view —> wms ViewRootImpl UI 绘制流程 :测…