预览 PDF 文档
引言
在现代Web应用中,文件预览功能是非常常见的需求之一。特别是在企业级应用中,用户经常需要查看各种类型的文件,如 PDF、Word、Excel 等。本文将详细介绍如何在Vue项目中实现 PDF 文档的预览功能。
实现原理
后端API
后端需要提供一个API接口,用于获取文件的二进制数据。这个接口通常会根据文件名或文件ID来返回文件内容。
前端处理
前端通过调用后端 API 获取文件的二进制数据,并将其转换为 Blob 对象。然后使用window.URL.createObjectURL 方法生成一个临时的 URL,最后通过 window.open 方法在新窗口中打开这个 URL,从而实现文件预览。
代码示例
node 服务端代码
const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');const app = express();
// 定义文件夹路径
const mergedDir = path.join(__dirname, 'merged');// 文件下载接口
app.get('/download', (req, res) => {const { fileName } = req.query;const filePath = path.join(mergedDir, fileName);fs.access(filePath, fs.constants.F_OK, (err) => {if (err) {return res.status(404).json({ error: '文件不存在' });}const stats = fs.statSync(filePath);if (stats.isFile()) {const contentType = getContentType(fileName);res.setHeader('Content-Type', contentType);// 对 fileName 进行编码const encodedFileName = encodeURIComponent(fileName);res.setHeader('Content-Disposition', `attachment; filename=${encodedFileName}`);fs.createReadStream(filePath).pipe(res);} else {res.status(400).json({ error: '不是一个文件' });}});
});// 获取文件的 MIME 类型
function getContentType(fileName) {const ext = path.extname(fileName).toLowerCase();switch (ext) {case '.js':return 'application/javascript';case '.json':return 'application/json';case '.html':return 'text/html';case '.css':return 'text/css';case '.txt':return 'text/plain';case '.png':return 'image/png';case '.jpg':case '.jpeg':return 'image/jpeg';case '.gif':return 'image/gif';case '.pdf':return 'application/pdf';case '.doc':return 'application/msword';case '.docx':return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';case '.ppt':return 'application/vnd.ms-powerpoint';case '.pptx':return 'application/vnd.openxmlformats-officedocument.presentationml.presentation';case '.xlsx':return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';default:return 'application/octet-stream';}
}
// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {console.log(`Server is running on port ${PORT}`);
});
前端代码实现
接口 API
import request from "@/utils/request";// 获取文件列表
export function getFilesList() {return request({url: "/getFilesList",method: "get",});
}// 文件预览
export function previewFile(fileName) {return request({url: `/download?fileName=${fileName}`,method: "get",responseType: "blob",});
}
页面代码
<template><div class="table"><el-table :data="tableData" header-align="center" border style="width: 100%"><el-table-column align="center" type="index" width="60" label="序号"></el-table-column><el-table-column align="center" prop="fileName" label="文件名" /><el-table-column align="center" prop="upTime" label="上传日期" width="200" /><el-table-column align="center" fixed="right" label="操作" width="120"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text">预览</el-button></template></el-table-column></el-table></div>
</template><script>
import { previewFile } from "@/api/file";
import { timeStampToString } from "@/utils/utils";
import { getFilesList } from "@/api/file";export default {name: "fileTable",data() {return {tableData: [],}},created() {this.getFileName();},methods: {// 获取文件列表async getFileName() {const { code, data: resData } = await getFilesList();console.log('code, data::: ', code, resData);if (code === 200) {resData.forEach(item => {item.upTime = timeStampToString(item.upTime);});this.tableData = resData;}},handleBlob(blob, filename) {console.log('blob::: ', blob,filename);let url = window.URL.createObjectURL(blob);var tempwindow = window.open("_blank");if (tempwindow) {tempwindow.location = url;}},// 文件预览async handleClick(row) {try {const response = await previewFile(row.fileName)console.log('response::: ', response);this.handleBlob(response, row.fileName)} catch (err) {console.error('Failed to preview file', err);}},}
}
</script>
实现效果

设置网页标题为文件名
handleBlob(blob, filename) {console.log('blob::: ', blob, filename);let url = window.URL.createObjectURL(blob);// 创建一个新窗口let tempWindow = window.open("", "_blank");// 设置新窗口的标题为文件名tempWindow.document.title = filename;// 在新窗口中嵌入一个 <iframe> 来预览 PDF 文件tempWindow.document.write('<html><head><title>' + filename + '</title></head><body>');tempWindow.document.write('<iframe src="' + url + '" style="width:100%;height:100%;border:none;"></iframe>');tempWindow.document.write('</body></html>');// 确保新窗口的内容加载完成后再释放 URLtempWindow.onload = function () {window.URL.revokeObjectURL(url);};},
修改后的效果

总结
本文详细介绍了如何在Vue项目中实现PDF文档的预览功能。通过前后端的协同工作,我们实现了从文件的存储、获取到预览的完整流程。具体来说:
-
后端API:提供了文件下载接口,根据文件名或文件ID返回文件的二进制数据,并设置了正确的MIME类型。
-
前端处理:通过调用后端API获取文件的二进制数据,将其转换为 Blob 对象,并生成一个临时的 URL。然后在新窗口中打开这个 URL,实现文件预览。
-
优化体验:为了提升用户体验,我们进一步优化了预览功能,通过在新窗口中嵌入
<iframe>并设置网页标题为文件名,使得预览界面更加友好和直观。
通过本文的介绍,读者可以轻松地在自己的Vue项目中实现类似的功能,提升应用的用户体验。希望本文对大家有所帮助。
相关文章:
预览 PDF 文档
引言 在现代Web应用中,文件预览功能是非常常见的需求之一。特别是在企业级应用中,用户经常需要查看各种类型的文件,如 PDF、Word、Excel 等。本文将详细介绍如何在Vue项目中实现 PDF 文档的预览功能。 实现原理 后端API 后端需要提供一个…...
Chromium 在WebContents中添加自定义数据c++
为了能在WebContents中添加自定义数据先看下几个关键类的介绍。 一、WebContents 介绍: WebContents是content模块核心,是呈现 Web 内容(通常为 HTML)位于矩形区域中。 最直观的是一个浏览器标签对应一个WebContents,…...
【Apache Zookeeper】
一、简介 1、场景 如何让⼀个应⽤中多个独⽴的程序协同⼯作是⼀件⾮常困难的事情。开发这样的应⽤,很容易让很多开发⼈员陷⼊如何使多个程序协同⼯作的逻辑中,最后导致没有时间更好地思考和实现他们⾃⼰的应⽤程序逻辑;又或者开发⼈员对协同…...
13.音乐管理系统(基于SpringBoot + Vue)
目录 1.系统的受众说明 2 需求分析 2.1用例图及用例分析 2.1.1 用户用例图及用例分析 2.1.2 管理员用例图及用例分析 2.2 系统结构图和流程图 2.2.1 音乐播放器的系统流程图(图2.2.1-1) 2.2.2 系统功能表(表2.2.2…...
如何从iconfont中获取字体图标并应用到微信小程序中去?
下面我们一一个微信小程序的登录界面的制作为例来说明,如何从iconfont中获取字体图标是如何应用到微信小程序中去的。首先我们看效果。 这里所有的图标,都是从iconfont中以字体的形式来加载的,也就是说,我们自始至终没有使用一张…...
C语言中的位操作
第一章 变量某位赋值与连续赋值 寄存器 | 值 //例如:a 1000 0011b a | (1<<2) //a 1000 0111 b 单独赋值 a | (3<<2*2) // 1011 0011b 连续赋值 第二章 变量某位清零与连续清零 寄存器 & ~() 值 //例子:a …...
Spring之HTTP客户端--RestTemplate的使用
原文网址:Spring之HTTP客户端--RestTemplate的使用_IT利刃出鞘的博客-CSDN博客 简介 本文介绍RestTemplate的用法。RestTemplate是Spring自带的HTTP客户端,推荐使用。 项目中经常需要使用http调用第三方的服务,常用的客户端如下࿱…...
vscode和pycharm在当前工作目录的不同|python获取当前文件目录和当前工作目录
问题背景 相信大家都遇到过一个问题:一个项目在vscode(或pycharm)明明可以正常运行,但当在pycharm(或vscode)中时,却经常会出现路径错误。起初,对于这个问题,我也是一知…...
速盾:海外高防CDN有哪些优势?
海外高防CDN(Content Delivery Network)是一种通过部署分布式节点服务器来加速网站内容分发的技术,它能够提供更快速、稳定、安全的网站访问体验。相比于传统的CDN服务,海外高防CDN具有以下几个优势: 全球分布…...
OpenCV视觉分析之目标跟踪(4)目标跟踪类TrackerDaSiamRPN的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 cv::TrackerDaSiamRPN 是 OpenCV 中用于目标跟踪的一个类,它实现了 DaSiam RPN(Deformable Siamese Region Proposal Net…...
自动对焦爬山算法原理
自动对焦爬山算法原理可以归纳为以下几个关键步骤: (1)初始化: 爬山算法从一个随机或预设的初始位置开始,这个位置代表了镜头的初始焦距。 (2)清晰度评价: 算法首先在当前焦距下捕…...
Hyperledger Fabric有那些核心技术,和其他区块链对比Hyperledger Fabric有那些优势
Hyperledger Fabric是一个模块化、权限化的企业级区块链平台,与比特币、以太坊等公有链相比,Fabric主要为私有链或联盟链设计,适用于企业应用。它包含多项核心技术,使其在企业级区块链应用中具有独特优势。以下是Fabric的核心技术…...
「Mac畅玩鸿蒙与硬件8」鸿蒙开发环境配置篇8 - 应用依赖与资源管理
本篇将介绍如何在 HarmonyOS 项目中高效管理资源文件和依赖,以确保代码结构清晰并提升应用性能。资源管理涉及图片、字符串、多语言文件等,通过优化文件加载和依赖管理,可以显著提升项目的加载速度和运行效率。 关键词 资源管理应用依赖优化…...
【Gorm】传统sql的增删查改,通过go去操作sql
MySQL中的建库,建表,删库,删表,添加记录,查询,删除记录,更新记录这些命令是一定要回的,就算我们脱离 orm 这些,也能直接连接上数据库进行操作。 一、数据库的操作 # 查…...
HTML小阶段二维表和思维导图
下面是对标签、元素、属性的对比二维表,通过对比3w1h(what是什么、where用在哪、why为什么要用、how如何用)来学习区分学习标签、元素、属性 标签 元素 属性 what (Tags)标签是用来标记内容块或标明元素内容意义 …...
AI与低代码的碰撞:企业数字化转型的新引擎
引言 在当今的商业环境中,企业数字化转型已从选择题变成了必答题。面对日益复杂的市场竞争和不断变化的客户需求,传统的开发模式常常显得力不从心——开发周期冗长、技术门槛高、成本居高不下,企业很难快速响应市场变化。而在这种背景下&…...
HarmonyOS应用开发者基础认证——初级闯关习题参考答案大全
相关文章 HarmonyOS应用开发者中级认证——中级闯关习题参考答案大全 HarmonyOS应用开发者高级认证——高级闯关习题参考答案大全 文章目录 HarmonyOS第一课 HarmonyOS介绍判断题单选题多选题 HarmonyOS第一课 DevEco Studio的使用判断题单选题多选题 HarmonyOS第一课 ArkTS语法…...
Vue背景图片自适应大屏与小屏
1,父绝子相 效果是台式看的更多,笔记本看部分。但是图片不会变形 <div class"father" style"width:100%; position:relative"> <img src"test.png" class"son" style"width:1920px; position:a…...
MongoDB 8.0.3版本安装教程
MongoDB 8.0.3版本安装教程 一、下载安装 1.进入官网 2.选择社区版 3.点击下载 4.下载完成后点击安装 5.同意协议,下一步 6.选择第二个Custon,自定义安装 7.选择安装路径 !记住安装路径 8.默认,下一步 9.取…...
【C语言】预处理(预编译)详解(下)(C语言最终篇)
文章目录 一、#和##1.#运算符2.##运算符 二、预处理指令#undef三、条件编译1.单分支条件编译2.多分支条件编译3.判断符号是否被定义4.判断符号是否没有被定义 四、头文件的包含1.库头文件的包含2.本地头文件的包含3.嵌套包含头文件的解决方法使用条件编译指令使用预处理指令#pr…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM)…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域,高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表,以及基于它们实现的 Reactor 模式,为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列?2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
消防一体化安全管控平台:构建消防“一张图”和APP统一管理
在城市的某个角落,一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延,滚滚浓烟弥漫开来,周围群众的生命财产安全受到严重威胁。就在这千钧一发之际,消防救援队伍迅速行动,而豪越科技消防一体化安全管控平台构建的消防“…...
