当前位置: 首页 > 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…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...