当前位置: 首页 > news >正文

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后调起浏览器打印

一、安装依赖 首先&#xff0c;需要安装 html2canvas 和 jsPDF 库。 npm install html2canvas jspdf二、创建公共方法引入 在utils文件夹下创建两个文件分别为pdfExport.js和printPDF.js&#xff0c;代码如下&#xff1a; pdfExport.js import html2canvas from html2canv…...

纯前端实现导出excel

项目背景&#xff1a; vue2 插件&#xff1a; xlsx&#xff1b;xlsx-style&#xff1b;file-saver 说明&#xff1a; 单独使用 xlsx插件&#xff0c;也可以将网页上的table导出成excel&#xff0c;但是导出的excel&#xff0c;没有样式 结合xlsx-style&#xff1b;file-saver&a…...

QT windows 5.12.0 安装包

这个是在线包&#xff0c;需要有账号的。 没有也没事&#xff0c;安装界面可以现场注册 百度网盘链接&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1QvXDert4b94GbUfD2f2G4g?pwd8888 提取码&#xff1a;8888...

改进YOLOv7 | 在 ELAN 模块中添加【Triplet】【SpatialGroupEnhance】【NAM】【S2】注意力机制 | 附详细结构图

改进 YOLOv7 | 在 ELAN 模块中添加【Triplet】【SpatialGroupEnhance】【NAM】【S2】注意力机制&#xff1a;中文详解 1. 简介 YOLOv7 是目前主流的目标检测算法之一&#xff0c;具有速度快、精度高的特点。但 YOLOv7 的原始模型结构中缺乏注意力机制&#xff0c;导致模型对全…...

windows系统停止更新办法

windows系统停止更新 双击启动下载的文件 然后再回到系统-更新这里&#xff0c;选择日期就行。...

数据标注概念

数据标注的步骤 数据清洗&#xff1a;处理数据中的噪声、缺失值和异常值&#xff0c;确保数据的质量和完整性。 数据转换&#xff1a;将数据从原始格式转换为适合机器学习模型处理的格式。 数据标注&#xff1a;根据应用需求&#xff0c;为数据添加标签或注释&#xff0c;标识…...

网络安全复习笔记

概述 要素 CIA&#xff1a;可用性&#xff1b;完整性&#xff1b;保密性。 可控性&#xff1b;不可否认性&#xff1b;可审查性。 攻击 被动&#xff1a;窃听 - 保密性&#xff1b;监听 - 保密性主动&#xff1a;假冒 - 完整性&#xff1b;重放 - 完整性&#xff1b;改写 -…...

Laravel - excel 导入数据

在Laravel中&#xff0c;可以使用maatwebsite/excel这个库来处理Excel文件的导入。 1.用命令行窗口打开项目根目录&#xff0c;使用 Composer 安装 maatwebsite/excel composer require maatwebsite/excel --ignore-platform-reqs 在你的config/app.php文件中注册服务提供者&…...

移动语义和完美转发

C11 引入了许多新特性&#xff0c;使得编写高效且现代的 C 代码变得更加容易。其中&#xff0c;移动语义&#xff08;Move Semantics&#xff09;和完美转发&#xff08;Perfect Forwarding&#xff09;是两个重要的特性&#xff0c;极大地提升了 C 的性能和灵活性。 移动语义…...

【IDEA】Spring项目build失败

通常因为环境不匹配需要在file->projectstructure里面调整一下。...

【无标题】安卓app 流量

该工具可以用于安卓app 流量&#xff0c;内存&#xff0c;cpu&#xff0c;fps等专项内容测试&#xff0c;并且有整机内存&#xff0c;cpu对比&#xff0c;还可监控手机网速&#xff0c;app流量&#xff0c;数据导出等功能&#xff0c;重点还是免费&#xff0c;毕竟PerfDog收费了…...

国产化ETL产品必备的特性(非开源包装)

ETL负责将分布的、异构数据源中的数据如关系数据、平面数据文件等抽取到临时中间层后进行抽取、清洗&#xff08;净化&#xff09;、转换、装载、标准、集成&#xff08;汇总&#xff09;...... 最后加载到数据仓库或数据集市中&#xff0c;成为联机分析处理、数据挖掘的基础。…...

flink 操作mongodb的例子

Apache Flink 是一个流处理和批处理的开源框架&#xff0c;它通常用于处理大量数据流。然而&#xff0c;Flink 本身并不直接提供对 MongoDB 的原生支持&#xff0c;因为 MongoDB 是一个 NoSQL 数据库&#xff0c;而 Flink 主要与关系型数据库&#xff08;如 JDBC 连接器&#x…...

【笔记】打卡01 | 初学入门

初学入门:01-02 01 基本介绍02 快速入门库处理数据集网络构建模型训练保存模型加载模型打卡-时间 01 基本介绍 MindSpore Data&#xff08;数据处理层&#xff09; ModelZoo&#xff08;模型库&#xff09; MindSpore Science&#xff08;科学计算&#xff09;&#xff0c;包含…...

Rocky9使用cockpitweb登陆时root用户无法登陆

Rocky9使用cockpitweb登陆时root用户无法登陆 [rootlvs ~]# vim /etc/cockpit/disallowed-users [rootlvs ~]# systemctl restart cockpit 取消disallowed-users中的root&#xff0c;即可访问 ip:9090 登陆。...

微信小程序修改标题

要修改微信小程序页面的标题和调整字体大小&#xff0c;你需要对 app.json 和页面对应的 json 文件进行配置。 修改页面标题 打开 app.json 文件&#xff0c;找到 pages 字段&#xff0c;确认需要修改的页面路径。打开对应页面的 .json 文件&#xff08;例如&#xff0c;pages/…...

Linux MySQL服务设置开机自启动

文章目录 前言简介一、准备工作二、操作步骤2.1 启动MySQL服务2.2 拷贝配置2.3 赋值权限2.4 添加为系统服务2.5 验证 总结 前言 请各大网友尊重本人原创知识分享&#xff0c;谨记本人博客&#xff1a;南国以南i、 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例…...

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远程 …...

国有企业如何提高人效比?

随着市场竞争的日益激烈&#xff0c;国有企业面临着越来越大的经营压力。为了提高经济效益和核心竞争力&#xff0c;国有企业越来越重视提高人效比。人效比&#xff0c;即企业总收益与员工总人数的比值&#xff0c;反映了企业每名员工所创造的平均收益。提高人效比意味着在相同…...

Leetcode - 周赛401

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

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

Nuxt.js 中的路由配置详解

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

12.找到字符串中所有字母异位词

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

优选算法第十二讲:队列 + 宽搜 优先级队列

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

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...