前端实现PDF文件打印和下载_业界新闻

发布时间:2024-07-17 19:56

阅读量:1

在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>