ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vue3前端多种方式超简单预览PDF文件一文搞定(内附源码示例自取) [打印本页]
作者: 用多少眼泪才能让你相信    时间: 2024-11-6 05:36
标题: Vue3前端多种方式超简单预览PDF文件一文搞定(内附源码示例自取)
目录

介绍
安装情况
预览pdf
当地文件预览 
在线路径预览
下载文件路径预览
学习源码

介绍

在前端vue中偶然会碰到需要举行预览pdf的场景,前段时间我一位前端朋友就有碰到这个问题,也和我举行了一些探讨
此中预览pdf场景重要会有三种情况:
当地文件,pdf在线预览路径,pdf下载路径三种,此中前面两种还比较常见,但是第三种的pdf下载路径举行预览这种场景还是不是太多的,由于他们后端给返回的路径就是一个下载路径,路径放到浏览器里面会直接举行下载pdf
下面将会以vue3为例来举行预览pdf的演示
安装情况

vue3
第三方包组件
  1. npm install vue-pdf-embed@^1.1.6
  3. npm install vue3-pdfjs@^0.1.6
复制代码
预览pdf

重要组件代码如下

当地文件预览 

首先第一种情况,直接把pdf文件放入项目目录中举行预览

启动检察效果

预览乐成
在线路径预览

 比较常见的就是一个可以直接拿来预览的路径,比如下面的路径:
http://static.shanhuxueyuan.com/test.pdf


誊写预览代码

 预览乐成
固然也可以使用体系自带的iframe举行预览

检察预览效果
 预览样式有些丑需要自己举行誊写样式,固然当地文件那种也可以使用iframe举行预览,可以自己实验下
下载文件路径预览

少少数情况下拿到的是一个直接下载的路径,此时前端不想举行下载想直接对该路径举行预览,固然前面的组件也完全可以兼容这种写法
首先后端准备提供一个下载文件的接口路径

  1. @GetMapping("/downloadPdf")
  2.     public ResponseEntity<StreamingResponseBody> downloadPdf() {
  3.         // 指定本地 PDF 文件的路径
  4.         String filePath = "C:\\var\\示例2.pdf";
  5.         File file = new File(filePath);
  7.         // 检查文件是否存在
  8.         if (!file.exists()) {
  9.             return ResponseEntity.notFound().build();
  10.         }
  12.         // 设置响应头
  13.         HttpHeaders headers = new HttpHeaders();
  14.         headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=test.pdf");
  15.         headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
  16.         headers.add("Pragma", "no-cache");
  17.         headers.add("Expires", "0");
  19.         // 返回 StreamingResponseBody
  20.         StreamingResponseBody body = outputStream -> {
  21.             try (FileInputStream fis = new FileInputStream(file)) {
  22.                 byte[] buffer = new byte[4096];
  23.                 int bytesRead;
  24.                 while ((bytesRead = fis.read(buffer)) != -1) {
  25.                     outputStream.write(buffer, 0, bytesRead);
  26.                 }
  27.             } catch (IOException e) {
  28.                 e.printStackTrace();
  29.             }
  30.         };
  32.         return ResponseEntity.ok()
  33.                 .headers(headers)
  34.                 .contentLength(file.length())
  35.                 .contentType(MediaType.APPLICATION_OCTET_STREAM)
  36.                 .body(body);
  37.     }
复制代码

服务启动后将接口路径直接放入到浏览器中回车验证是否直接举行文件的下载
下载乐成表现该路径就是一个直接下载的路径
 

检察预览效果:

预览乐成
但是此时嵌套一样平常的iframe组件就不行了

检察预览 

预览失败,浏览器直接下载文件了
学习源码

vue3预览pdf示例源码
提取码: nuq6

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4