预览 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项目中实现类似的功能,提升应用的用户体验。希望本文对大家有所帮助。

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

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

相关文章

【c++ gtest】使用谷歌提供的gtest和抖音豆包提供的AI大模型来对代码中的函数进行测试

【c gtest】使用谷歌提供的gtest和抖音豆包提供的AI大模型来对代码中的函数进行测试 下载谷歌提供的c测试库在VsCode中安装抖音AI大模型找到c项目文件夹&#xff0c;使用VsCode和VS进行双开生成gtest代码进行c单例测试 下载谷歌提供的c测试库 在谷歌浏览器搜索github gtest, 第…

Pycharm,2024最新版Pycharm现在安装环境配置汉化详细教程!

码&#xff08;文末附带精品籽料&#xff09;&#xff1a; K384HW36OBeyJsaWNlbnNlSWQiOiJLMzg0SFczNk9CIiwibGljZW5zZWVOYW1lIjoibWFvIHplZG9uZyIsImxpY2Vuc2VlVHlwZSI6IlBFUlNPTkFMIiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6IiIsIm…

【论文分享】TensorTEE 24‘ASPLOS

目录 AbstractIntroductionContribution BackgroundCollaborative ComputingLLM CPU-NPU collaborative computing Memory ProtectionMemory encryption Integrity verificationHeterogeneous NPU TEEIntegrated NPU TEEDiscrete NPU TEE Threat Model MotivationInefficient C…

力扣每日一题合集

3211. 生成不含相邻零的二进制字符串 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:vector<string> validStrings(int n) {vector<string> ans;ans.emplace_back("0");ans.emplace_back("1");for(int i 1; i < n; i)…

Vue3 中实现过渡动画的几种方式?

前言 首先抛开 vue 本身&#xff0c;假设需要给某个 Dom 元素实现一些过渡动画&#xff0c;那么下面这些事是必须的&#xff1a; 实现目标元素不同时刻下的样式&#xff0c;常见做法就是抽取在不同的 css 选择器中根据不同时刻切换不同的 css 选择器以达到样式的变化设置样式…

Linux 中,flock 对文件加锁

在Linux中&#xff0c;flock是一个用于对文件加锁的实用程序&#xff0c;它可以帮助协调多个进程对同一个文件的访问&#xff0c;避免出现数据不一致或冲突等问题。以下是对flock的详细介绍&#xff1a; 基本原理 flock通过在文件上设置锁来控制多个进程对该文件的并发访问。…

【华为HCIP实战课程二十七】中间到中间系统协议IS-IS Hello报文,网络工程师

一、IS-IS术语 1、IIH: ISIS hello 报文,相当于OSPF的Hello报文,hello-interval 10s, hold-time 30s 2、LSP:链路状态数据单元,类似OSPF的LSA,携带路由信息(L1和L2的LSP) 3、SNP:系列号PDU (1)、PSNP:部分序列号协议数据单元,类似OSPF的ACK,Request (2)、CSNP:…

python-opencv给图片或视频去水印

文章目录 引言inpaint函数的使用方法鼠标事件回调函数cv2.setMouseCallback介绍去水印步骤实现代码 引言 本文主要基于cv2.inpaint函数实现图片的水印去除。 inpaint函数基于图像修复算法&#xff0c;通过对缺陷区域周围像素的分析和插值&#xff0c;生成合适的像素值来填充缺…

渗透测试-百日筑基—文件上传篇特征截断渲染%00绕过——下篇

目录 day10-渗透测试文件上传篇&绕过&特征&截断&渲染 一、黑名单大小写绕过代码分析 1、获取文件后缀名进行判断&#xff0c;如果后缀在这个字典里就禁止上传。 2、黑名单大小写绕过攻击 二、利用 windows 系统特征绕过上传 1、windows 系统特征绕过漏洞…

C语言 | Leetcode C语言题解之第522题最长特殊序列II

题目&#xff1a; 题解&#xff1a; #define MAX(a, b) ((a) > (b) ? (a) : (b))bool is_subseq(const char *s, const char *t) {int pt_s 0, pt_t 0;int len_s strlen(s), len_t strlen(t);while (pt_s < len_s && pt_t < len_t) {if (s[pt_s] t[pt_…

STM32CUBEMX安富莱STM32-V6开发板使用FMC驱动SDRAM芯片MT48LC4M32B2TG

文章的目的是快速使用SDRAM芯片&#xff0c;没有详细讲解原理。 1、环境&#xff1a; 单片机&#xff1a;STM32F429VIT6 CUBE版本&#xff1a;STM32CUBMX 6.12.1 编译&#xff1a;KEIL MDK 硬件&#xff1a;安富莱STM32-V6开发板 SDRAM芯片&#xff1a;MT48LC4M32B2TG 2、配…

为什么QNAP威联通NAS的APP center无法安装APP?

创作立场&#xff1a;原创不易&#xff0c;拒绝搬运~ hello大家好&#xff0c;我是你们的老伙伴&#xff0c;稳重的大王~ 如题&#xff0c;大王带你一起来排查一下&#xff0c;可能遇到的问题。如有帮助&#xff0c;请给个关注鼓励&#xff0c;互谢~ 1 首先&#xff0c;安装…

人工智能算法之粒子群优化算法

人工智能算法之粒子群优化算法 粒子群优化算法&#xff08;PSO&#xff09;是一种群体智能优化算法&#xff0c;由Kennedy和Eberhart在1995年提出&#xff0c;灵感来源于鸟群、鱼群等生物群体行为。PSO通过群体中个体的交互及对周围环境的感知&#xff0c;快速找到最优解。PSO算…

【深入浅出】深入浅出transformer(附面试题)

本文的目的是为了帮助大家面试transformer&#xff0c;会结合我的面试经历以及看法去讲解transformer&#xff0c;并非完整的技术细致讲解&#xff0c;介意请移步。 结构 提到transformer网络模型&#xff0c;大家脑海中是否有这张图呢&#xff1f; 这是网络结构中经典的编解…

net 获取本地ip地址,net mvc + net core 两种

net mvc public static string GetIP(HttpRequestBase request){// 尝试获取 X-Forwarded-For 头string result request.Headers["X-Forwarded-For"]?.Split(,).FirstOrDefault()?.Trim();if (string.IsNullOrEmpty(result)){// 获取用户的 IP 地址result reques…

Handler、Looper、message进阶知识

Android Handler、Looper、Message的进阶知识 在Android开发中&#xff0c;Handler、Looper和Message机制是多线程通信的核心。为了深入理解并优化它们的使用&#xff0c;尤其是在高并发和UI性能优化中&#xff0c;可以利用一些高级特性。 1. Handler的高阶知识 Handler在基本…

开源一款基于 JAVA 的仓库管理系统,支持三方物流和厂内物流,包含 PDA 和 WEB 端的源码

大家好&#xff0c;我是一颗甜苞谷&#xff0c;今天分享一款基于 JAVA 的仓库管理系统,支持三方物流和厂内物流,包含 PDA 和 WEB 端的源码。 前言 在当前的物流仓储行业&#xff0c;企业面临着信息化升级的迫切需求&#xff0c;但往往受限于高昂的软件采购和维护成本。现有的…

Sigrity Power SI Resonance analysis模式如何进行谐振分析操作指导

Sigrity Power SI Resonance analysis模式如何进行谐振分析操作指导 Sigrity Power SI可以方便快捷的进行谐振分析,谐振分析的目的是为了分析电源地平面组成的腔体的谐振频率以及谐振幅度,让频率在谐振频率附近的信号避开谐振腔,以及添加相应的电容来降低谐振峰值. 仍然以这…

vue特性

Vue.js是一套构建用户界面的渐进式框架&#xff0c;其特性主要包括以下几点&#xff1a; MVVM模式 Vue.js采用了MVVM&#xff08;Model-View-ViewModel&#xff09;的设计模式。在这种模式下&#xff0c;Model代表数据模型&#xff0c;View代表用户界面&#xff0c;ViewModel…

【AI开源项目】FastGPT- 快速部署FastGPT以及使用知识库的两种方式!

文章目录 一、FastGPT大模型介绍1. 开发团队2. 发展史3. 基本概念 二、FastGPT与其他大模型的对比三、使用 Docker Compose 快速部署 FastGPT1、安装 Docker 和 Docker Compose&#xff08;1&#xff09;. 安装 Docker&#xff08;2&#xff09;. 安装 Docker Compose&#xff…