前端实现PDF文件打印和下载

在Web开发中,经常需要处理PDF文件,尤其是在业务涉及发票、报告或文档生成的场景下。本文将详细介绍如何使用前端技术实现PDF文件的打印和下载,我们将利用HTML5的<embed>元素和JavaScript库FileSaver.js来完成这一任务。

一、环境准备

确保你的项目中包含了以下技术栈:

  • HTML5
  • CSS3
  • JavaScript
  • FileSaver.js(用于文件下载)

二、引入FileSaver.js

首先,你需要在项目中引入FileSaver.js库。你可以通过CDN链接直接引入,或者使用npm进行安装。

通过CDN引入

Html

深色版本

1<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

通过npm安装

Bash

深色版本

1npm install file-saver

然后在你的JavaScript文件中引入:

Javascript

深色版本

1import { saveAs } from 'file-saver';

三、显示PDF文件

使用HTML5的<embed><object>标签可以嵌入PDF文件。我们选择使用<embed>,因为它提供了更好的跨浏览器兼容性。

Html

深色版本

1<embed id="pdfViewer" type="application/pdf" src="path/to/your/file.pdf" width="100%" height="600px">

四、实现PDF打印

要实现PDF文件的打印,可以使用JavaScript的window.print()方法。但是,由于<embed>标签本身没有直接的打印功能,我们需要先确保PDF文件完全加载后再触发打印动作。

Javascript

深色版本

1document.getElementById('pdfViewer').addEventListener('load', function() {
2  window.print();
3});

然而,上面的方法在某些浏览器中可能不起作用,因为window.print()在某些情况下会阻止PDF文件的渲染。为此,我们可以采用一种更可靠的方法,使用iframe来加载PDF文件,然后再打印:

Html

深色版本

1<iframe id="printFrame" style="display:none;"></iframe>

Javascript

深色版本

1function printPDF() {
2  var iframe = document.getElementById('printFrame');
3  iframe.src = 'path/to/your/file.pdf';
4
5  iframe.onload = function() {
6    setTimeout(function() {
7      window.frames['printFrame'].focus();
8      window.frames['printFrame'].print();
9      iframe.src = ''; // 清空iframe,防止重复打印
10    }, 100);
11  };
12}

五、实现PDF下载

使用FileSaver.js库,我们可以轻松地将PDF文件下载到用户的设备上。以下是一个下载PDF文件的示例函数:

Javascript

深色版本

1function downloadPDF(url, filename) {
2  fetch(url)
3    .then(response => response.blob())
4    .then(blob => {
5      saveAs(blob, filename);
6    })
7    .catch(error => console.error('Error downloading PDF:', error));
8}

在你的HTML页面中添加一个按钮,调用这个函数:

Html

深色版本

1<button onclick="downloadPDF('path/to/your/file.pdf', 'filename.pdf')">Download PDF</button>

六、完整示例

将上述代码片段整合在一起,你将得到一个可以打印和下载PDF文件的前端页面。

Html

深色版本

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>PDF Viewer</title>
6<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
7</head>
8<body>
9<embed id="pdfViewer" type="application/pdf" src="path/to/your/file.pdf" width="100%" height="600px">
10
11<iframe id="printFrame" style="display:none;"></iframe>
12
13<button onclick="printPDF()">Print PDF</button>
14<button onclick="downloadPDF('path/to/your/file.pdf', 'filename.pdf')">Download PDF</button>
15
16<script>
17function printPDF() {
18  var iframe = document.getElementById('printFrame');
19  iframe.src = 'path/to/your/file.pdf';
20
21  iframe.onload = function() {
22    setTimeout(function() {
23      window.frames['printFrame'].focus();
24      window.frames['printFrame'].print();
25      iframe.src = '';
26    }, 100);
27  };
28}
29
30function downloadPDF(url, filename) {
31  fetch(url)
32    .then(response => response.blob())
33    .then(blob => {
34      saveAs(blob, filename);
35    })
36    .catch(error => console.error('Error downloading PDF:', error));
37}
38</script>
39</body>
40</html>

七、总结

通过本文的介绍,你已经学会了如何在前端实现PDF文件的打印和下载功能。这不仅可以增强你的Web应用的功能性,还可以提高用户体验。记得在实际应用中,根据你的具体需求调整代码,并确保遵守相关的版权和隐私法规。

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

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

相关文章

Python 爬虫:使用打码平台来识别各种验证码:

本课程使用的是 超级鹰 打码平台&#xff0c; 没有账户的请自行注册&#xff01; 超级鹰验证码识别-专业的验证码云端识别服务,让验证码识别更快速、更准确、更强大 使用打码平台来攻破验证码难题&#xff0c; 是很简单容易的&#xff0c; 但是要钱&#xff01; 案例代码及测…

React18+Redux+antd 项目实战 JS

React18Reduxantd 项目实战 js Ant Design插件官网 Axios官网 (可配置请求拦截器和响应拦截器) JavaScript官网 Echarts官网 一、项目前期准备 1.创建新项目 hotel-manager npx create-react-app hotel-manager2.安装依赖 //安装路由 npm i react-router-domnpm i aixos /…

CentOS搭建邮件服务器:DNS配置方法技巧?

CentOS搭建邮件服务器的流程&#xff1f;如何高效使用CentOS&#xff1f; 在当今数字化时代&#xff0c;邮件服务器的需求日益增加。为了确保邮件能够顺利送达&#xff0c;正确的DNS配置是必不可少的一环。AokSend将详细介绍在CentOS搭建邮件服务器过程中&#xff0c;如何进行…

SpringBoot新手快速入门系列教程7:基于Redis的一个简单存取数据的例子

我的教程都是亲自测试可行才发布的&#xff0c;如果有任何问题欢迎留言或者来群里我每天都会解答。 新手可能有这样的疑问&#xff0c;有了数据库的存取方式&#xff0c;我们为什么还要使用Redis这种缓存数据库读取方式呢&#xff1f; 原因主要有以下几点&#xff1a; 1. 性能…

力扣题解(单词拆分)

139. 单词拆分单词拆分 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。如果可以利用字典中出现的一个或多个单词拼接出 s 则返回 true。 注意&#xff1a;不要求字典中出现的单词全部都使用&#xff0c;并且字典中的单词可以重复使用。 思路&#xff1a; 规定dp[i]…

亚马逊中小型店铺如何开店?

对于想要在亚马逊平台上开设店铺的中小型卖家来说&#xff0c;这是一个非常值得关注的话题。作为亚马逊上的一个重要参与者&#xff0c;中小型店铺有着广阔的发展空间和无限的可能性&#xff0c;但也由于成本预算与规模限制&#xff0c;无法与大型店铺的策略相提并论&#xff0…

字符串模板被噶了,JDK 23 删除了预览功能“字符串模板”

之前出了一个视频&#xff0c;介绍 JDK 23 中的新特性。之后我才发现&#xff0c;在 JDK 21 和 22 中的预览功能“字符串模板&#xff08;String Templates&#xff09;”&#xff0c;在 JDK 23 中已经没有了。字符串模板的相关代码&#xff0c;已经被全部删除了。 字符串模板的…

Spring Boot 3.3 【二】Spring Boot自动配置机制深度解析

简单动作&#xff0c;深刻联结。在这技术海洋&#xff0c;我备好舟&#xff0c;等你扬帆。启航吧&#xff01; &#x1f31f;点击【关注】&#xff0c;解锁定期的技术惊喜&#xff0c;让灵感与知识的源泉不断涌动。 &#x1f44d;一个【点赞】&#xff0c;如同心照不宣的默契&a…

Unity免费领场景多人实时协作地编2人版局域网和LAN联机类似谷歌文档协同合作搭建场景同步资产设置编辑付费版支持10人甚至更多20240709

大家有没有用过谷歌文档、石墨文档、飞书文档等等之类的协同工具呢&#xff1f; Blender也有类似多人联机建模的插件&#xff0c; Unity也有类似的多人合作搭建场景的插件啦。 刚找到一款免费插件&#xff0c;可以支持2人局域网和LAN联机地编。 付费的版本支持组建更大的团队。…

详解如何通过稀疏向量优化信息检索

在信息检索方法的发展历程中&#xff0c;我们见证了从传统的统计关键词匹配到如 BERT 这样的深度学习模型的转变。虽然传统方法提供了坚实的基础&#xff0c;但往往难以精准捕捉文本的语义关系。如 BERT 这样的稠密检索方法通过利用高维向量捕获文本的上下文语义&#xff0c;为…

烟雾识别技术在火灾预防中的应用:思通数科大模型的力量

引言 火灾是导致生命财产损失的重大灾害之一。早期检测和快速响应是预防火灾和减少损失的关键。结合思通数科大模型的烟雾识别技术&#xff0c;为实时检测和精确定位烟雾来源提供了一种高效的解决方案。本文将探讨这一技术如何有效预防火灾并保障人员安全。 烟雾识别技术概述 …

注册自定义总线

1、在/sys/bus下注册一个自定义总线 #include<linux/module.h> #include<linux/init.h> #include<linux/kernel.h> #include<linux/kobject.h> #include<linux/slab.h> #include<linux/sysfs.h> #include<linux/device.h> #include…

bug修复 修复修复修复

好的&#xff0c;这里是更新后的代码&#xff0c;将所有 inRange 函数的第一个变量替换为 ZoomOutimage&#xff1a; // 绿色分岔路 if (divergerColor "green" && nextColor "null") {cv::Mat frameGreen, frameRed;frame2.copyTo(frameGreen)…

如何在 Fedora 中使用 `shred` 擦除驱动器或文件

English Version: https://blog.csdn.net/sch0120/article/details/140390161 如何在 Fedora 中使用 shred 擦除驱动器或文件 安全擦除驱动器对于保护您的敏感数据免受未授权访问至关重要。在这篇博文中&#xff0c;我们将学习如何在 Fedora 中使用 shred 命令安全擦除整个驱…

FATE Flow 源码解析 - 作业提交处理流程

背景介绍 FATE 是隐私计算中最有名的开源项目了&#xff0c;从 star 的数量上来看也可以看出来。截止 2023 年 3 月共收获 4.9k 个 star&#xff0c;但是 FATE 一直被认为代码框架复杂&#xff0c;难以理解&#xff0c;作为一个相关的从业者&#xff0c;后续会持续对 FATE 项目…

React@16.x(56)Redux@4.x(5)- 实现 createStore

目录 1&#xff0c;分析2&#xff0c;实现2.1&#xff0c;基础实现2.2&#xff0c;优化2.2.1&#xff0c;随机字符串2.2.2&#xff0c;action 的判断2.2.2&#xff0c;监听器的优化 2.3&#xff0c;最终形态 1&#xff0c;分析 createStore()&#xff0c;参数1为 reducer&…

0601STM32TIM

TOC 分为四部分&#xff0c;八小节 一部分&#xff1a;主要讲定时器基本定时的功能&#xff0c;也就是定一个事件&#xff0c;让定时器每隔这个时间产生一个中断&#xff0c;来实现每隔一个固定时间来执行一段程序的目的&#xff0c;比如做一个时钟、秒表&#xff0c;或者使用一…

【Linux】1w详解如何实现一个简单的shell

目录 实现思路 1. 交互 获取命令行 2. 子串分割 解析命令行 3. 指令的判断 内建命令 4. 普通命令的执行 补充&#xff1a;vim 文本替换 整体代码 重点思考 1.getenv和putenv是什么意思 2.代码extern char **environ; 3.内建命令是什么 4.lastcode WEXITSTATUS(sta…

Java-final关键字详解

Java-final关键字详解 一、引言 二、什么是 final 关键字&#xff1f; 三、final 变量 final 局部变量 final 实例变量 final 静态变量 四、final 方法 五、final 类 六、final 关键字的实际应用 1. 定义常量 2. 防止方法被重写 3. 创建不可变类 4. 优化性能 七、…

切割01串(牛客小白月赛98)

题意&#xff1a; 给三个整数n&#xff0c;l&#xff0c;r&#xff0c;和一个字符串s&#xff0c;满足l<|c0-c1|<r就可以切成字符串a和字符串b&#xff0c;c0为字符串a左侧出现0的次数&#xff0c;c1为字符串b右侧出现1的次数&#xff0c;求最多切割次数 知识点&#x…