Vue页面生成PDF后调起浏览器打印
一、安装依赖
首先,需要安装 html2canvas 和 jsPDF 库。
npm install html2canvas jspdf
二、创建公共方法+引入
在utils文件夹下创建两个文件分别为pdfExport.js和printPDF.js,代码如下:
- pdfExport.js
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';export const exportToPDF = async (elementId) => {console.log('Exporting PDF...');const content = document.getElementById(elementId);if (!content) {console.error(`Element with id ${elementId} not found.`);return;}try {const canvas = await html2canvas(content);const imgData = canvas.toDataURL('image/png');const pdf = new jsPDF({orientation: 'portrait',unit: 'mm',format: 'a4'});// 获取页面尺寸const pageWidth = pdf.internal.pageSize.getWidth();const pageHeight = pdf.internal.pageSize.getHeight();// 计算图片宽高比const imgWidth = pageWidth;const imgHeight = (canvas.height * imgWidth) / canvas.width;// 分页添加图片let position = 0;while (position < imgHeight) {pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);position += pageHeight;if (position < imgHeight) {pdf.addPage();}}// 将 PDF 转换为 Blob 对象const blob = pdf.output('blob');console.log('PDF Blob generated:', blob); // 打印生成的 Blob 对象信息return blob; // 返回生成的 Blob 对象,供后续使用} catch (error) {console.error('导出 PDF 失败:', error);throw error; // 抛出异常供调用者处理}
};
- printPDF.js
export const printPDF = (blob) => {try {const url = URL.createObjectURL(blob);console.log('PDF Blob URL:', url); // 打印生成的 Blob URL// 创建一个隐藏的 iframeconst iframe = document.createElement('iframe');iframe.style.position = 'fixed';iframe.style.right = '0';iframe.style.bottom = '0';iframe.style.width = '0';iframe.style.height = '0';iframe.style.border = 'none';document.body.appendChild(iframe);// 设置 iframe 的 src 属性为 PDF 文件的 URLiframe.src = url;// 加载完成在进行打印操作,确保 PDF 加载完成iframe.onload = function() {iframe.contentWindow.focus();iframe.contentWindow.print();// 打印完成后移除 iframe 和释放 URLsetTimeout(() => {// document.body.removeChild(iframe);URL.revokeObjectURL(url);}, 500)};} catch (error) {console.error('打印 PDF 出错:', error);throw error;}
};
创建好后在main.js中引入方法
import { exportToPDF } from '../utils/pdfExport';
Vue.prototype.$exportToPDF = exportToPDF;import { printPDF } from '../utils/printPDF';
Vue.prototype.$printPDF = printPDF;
三、使用
- html
<template><div><!-- 打印按钮 --><span class="mr20" @click="printPageFn">打印页面</span><!-- 需要打印的页面内容,可以是任意div,设置id就可以 --><router-view id="contentToExport"/></div>
</template>
- Javascript
// 打印页面
printPageFn(){//注意传入的id是否与页面设置的id一致this.$exportToPDF('contentToExport').then((blob) => {this.$printPDF(blob);});
},
相关文章:
Vue页面生成PDF后调起浏览器打印
一、安装依赖 首先,需要安装 html2canvas 和 jsPDF 库。 npm install html2canvas jspdf二、创建公共方法引入 在utils文件夹下创建两个文件分别为pdfExport.js和printPDF.js,代码如下: pdfExport.js import html2canvas from html2canv…...
纯前端实现导出excel
项目背景: vue2 插件: xlsx;xlsx-style;file-saver 说明: 单独使用 xlsx插件,也可以将网页上的table导出成excel,但是导出的excel,没有样式 结合xlsx-style;file-saver&a…...
QT windows 5.12.0 安装包
这个是在线包,需要有账号的。 没有也没事,安装界面可以现场注册 百度网盘链接: 链接:https://pan.baidu.com/s/1QvXDert4b94GbUfD2f2G4g?pwd8888 提取码:8888...
改进YOLOv7 | 在 ELAN 模块中添加【Triplet】【SpatialGroupEnhance】【NAM】【S2】注意力机制 | 附详细结构图
改进 YOLOv7 | 在 ELAN 模块中添加【Triplet】【SpatialGroupEnhance】【NAM】【S2】注意力机制:中文详解 1. 简介 YOLOv7 是目前主流的目标检测算法之一,具有速度快、精度高的特点。但 YOLOv7 的原始模型结构中缺乏注意力机制,导致模型对全…...

windows系统停止更新办法
windows系统停止更新 双击启动下载的文件 然后再回到系统-更新这里,选择日期就行。...
数据标注概念
数据标注的步骤 数据清洗:处理数据中的噪声、缺失值和异常值,确保数据的质量和完整性。 数据转换:将数据从原始格式转换为适合机器学习模型处理的格式。 数据标注:根据应用需求,为数据添加标签或注释,标识…...

网络安全复习笔记
概述 要素 CIA:可用性;完整性;保密性。 可控性;不可否认性;可审查性。 攻击 被动:窃听 - 保密性;监听 - 保密性主动:假冒 - 完整性;重放 - 完整性;改写 -…...

Laravel - excel 导入数据
在Laravel中,可以使用maatwebsite/excel这个库来处理Excel文件的导入。 1.用命令行窗口打开项目根目录,使用 Composer 安装 maatwebsite/excel composer require maatwebsite/excel --ignore-platform-reqs 在你的config/app.php文件中注册服务提供者&…...
移动语义和完美转发
C11 引入了许多新特性,使得编写高效且现代的 C 代码变得更加容易。其中,移动语义(Move Semantics)和完美转发(Perfect Forwarding)是两个重要的特性,极大地提升了 C 的性能和灵活性。 移动语义…...

【IDEA】Spring项目build失败
通常因为环境不匹配需要在file->projectstructure里面调整一下。...
【无标题】安卓app 流量
该工具可以用于安卓app 流量,内存,cpu,fps等专项内容测试,并且有整机内存,cpu对比,还可监控手机网速,app流量,数据导出等功能,重点还是免费,毕竟PerfDog收费了…...
国产化ETL产品必备的特性(非开源包装)
ETL负责将分布的、异构数据源中的数据如关系数据、平面数据文件等抽取到临时中间层后进行抽取、清洗(净化)、转换、装载、标准、集成(汇总)...... 最后加载到数据仓库或数据集市中,成为联机分析处理、数据挖掘的基础。…...
flink 操作mongodb的例子
Apache Flink 是一个流处理和批处理的开源框架,它通常用于处理大量数据流。然而,Flink 本身并不直接提供对 MongoDB 的原生支持,因为 MongoDB 是一个 NoSQL 数据库,而 Flink 主要与关系型数据库(如 JDBC 连接器&#x…...

【笔记】打卡01 | 初学入门
初学入门:01-02 01 基本介绍02 快速入门库处理数据集网络构建模型训练保存模型加载模型打卡-时间 01 基本介绍 MindSpore Data(数据处理层) ModelZoo(模型库) MindSpore Science(科学计算),包含…...

Rocky9使用cockpitweb登陆时root用户无法登陆
Rocky9使用cockpitweb登陆时root用户无法登陆 [rootlvs ~]# vim /etc/cockpit/disallowed-users [rootlvs ~]# systemctl restart cockpit 取消disallowed-users中的root,即可访问 ip:9090 登陆。...
微信小程序修改标题
要修改微信小程序页面的标题和调整字体大小,你需要对 app.json 和页面对应的 json 文件进行配置。 修改页面标题 打开 app.json 文件,找到 pages 字段,确认需要修改的页面路径。打开对应页面的 .json 文件(例如,pages/…...
Linux MySQL服务设置开机自启动
文章目录 前言简介一、准备工作二、操作步骤2.1 启动MySQL服务2.2 拷贝配置2.3 赋值权限2.4 添加为系统服务2.5 验证 总结 前言 请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i、 提示:以下是本篇文章正文内容,下面案例…...

MacOS设备远程登录配置结合内网穿透实现异地ssh远程连接
文章目录 前言1. MacOS打开远程登录2. 局域网内测试ssh远程3. 公网ssh远程连接MacOS3.1 MacOS安装配置cpolar3.2 获取ssh隧道公网地址3.3 测试公网ssh远程连接MacOS 4. 配置公网固定TCP地址4.1 保留一个固定TCP端口地址4.2 配置固定TCP端口地址 5. 使用固定TCP端口地址ssh远程 …...
国有企业如何提高人效比?
随着市场竞争的日益激烈,国有企业面临着越来越大的经营压力。为了提高经济效益和核心竞争力,国有企业越来越重视提高人效比。人效比,即企业总收益与员工总人数的比值,反映了企业每名员工所创造的平均收益。提高人效比意味着在相同…...

Leetcode - 周赛401
目录 一,3178. 找出 K 秒后拿着球的孩子 二,3179. K 秒后第 N 个元素的值 三,3180. 执行操作可获得的最大总奖励 I 四,3181. 执行操作可获得的最大总奖励 II 一,3178. 找出 K 秒后拿着球的孩子 本题可以直接模拟&a…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...
脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)
一、数据处理与分析实战 (一)实时滤波与参数调整 基础滤波操作 60Hz 工频滤波:勾选界面右侧 “60Hz” 复选框,可有效抑制电网干扰(适用于北美地区,欧洲用户可调整为 50Hz)。 平滑处理&…...

使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置,使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...

优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...
Qt 事件处理中 return 的深入解析
Qt 事件处理中 return 的深入解析 在 Qt 事件处理中,return 语句的使用是另一个关键概念,它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别:不同层级的事件处理 方…...