【若依前后端分离】前端vue页面查看服务器当地的PDF

 后端实现：

   利用FileSystemResource包装文件，以便Spring MVC可以处理该资源
  创建HttpHeaders对象以设置相应头
  设置Content-Disposition头，使得欣赏器以内联方式显示PDF（即在欣赏器中直接打开）
  设置Content-Type为application/pdf，指示相应体是一个PDF文件
  构建并返回带有指定头信息和PDF资源的ResponseEntity，状态码为200 OK
   
后端java代码 ：

1. package com.hm.wms.pdf.controller;
3. import org.mybatis.logging.Logger;
4. import org.mybatis.logging.LoggerFactory;
5. import org.springframework.core.io.*;
6. import org.springframework.http.*;
7. import org.springframework.web.bind.annotation.GetMapping;
8. import org.springframework.web.bind.annotation.PathVariable;
9. import org.springframework.web.bind.annotation.RequestMapping;
10. import org.springframework.web.bind.annotation.RestController;
12. import java.io.File;
14. /**
15. * @author zy
16. */
17. @RestController
18. @RequestMapping("/file")
19. public class PdfController {
21. //可以系统配置文件路径代替代码中的“E:/cs/”
23.     /**
24.      * 展示PDF文件
25.      * 测试路径：本地E:/cs/cs.pdf 对应http://ip:端口/file/showPdf/文件名
26.      * @param pdfName 文件名
27.      * @return 响应实体，包含PDF文件的资源
28.      */
29.     @GetMapping("/showPdf/{pdfName}")
30.     public ResponseEntity<FileSystemResource> showPdf(@PathVariable("pdfName") String pdfName) {
31.         if (!pdfName.endsWith(".pdf")) {
32.             throw new RuntimeException("读取pdf文件失败，扩展名错误");
33.         }
34.         // 使用sanitizePath方法确保传入的pdfName路径安全，防止路径遍历等安全问题
35.         String safeFilePath = sanitizePath("E:/cs/", pdfName);
37.         // 根据处理后的安全路径创建File对象
38.         File file = new File(safeFilePath);
40.         // 检查文件是否存在并且是一个标准文件，若不满足条件则抛出异常
41.         if (!file.exists() || !file.isFile()) {
42.             throw new RuntimeException("文件未找到");
43.         }
45.         // 使用FileSystemResource包装文件，以便Spring MVC可以处理该资源
46.         FileSystemResource resource = new FileSystemResource(file);
48.         // 创建HttpHeaders对象以设置响应头
49.         HttpHeaders headers = new HttpHeaders();
51.         // 设置Content-Disposition头，使得浏览器以内联方式显示PDF（即在浏览器中直接打开）
52.         headers.add(HttpHeaders.CONTENT_DISPOSITION, "inline; filename=" + resource.getFilename());
54.         // 设置Content-Type为application/pdf，指示响应体是一个PDF文件
55.         headers.add(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_PDF_VALUE);
57.         // 构建并返回带有指定头信息和PDF资源的ResponseEntity，状态码为200 OK
58.         return ResponseEntity.ok()
59.         .headers(headers)
60.         .body(resource);
61.     }
63.     /**
64.      * 确保路径安全，防止路径遍历攻击。
65.      *
66.      * @param baseDir  基础目录
67.      * @param filePath 文件路径
68.      * @return 安全的文件路径
69.      */
70.     private String sanitizePath(String baseDir, String filePath) {
71.         // 确保filePath不会导致路径遍历，这里简单示例为拼接，实际应用中应使用更严格的安全策略
72.         if (!filePath.startsWith("/") && !filePath.contains("..")) {
73.             return baseDir + filePath;
74.         }
75.         throw new IllegalArgumentException("非法的文件路径");
76.     }
77. }

复制代码

 
测试： 

启动后端，打开欣赏器输入http://ip:端口/file/showPdf/文件名，修改为自己的ip端口和文件名称（其他内容自己修改），若打开pdf文件则说明成功了！
例图：

 
前端实现1： dialog中预览pdf

想要在页面dialog中打开pdf文件举行预览查看
安装依靠：npm vue-pdf --save
全部vue代码：可自己修改样式

1. <template>
2.   <el-dialog :title="title1" :visible.sync="openDetail" append-to-body>
3.     <div>
4.       <pdf
5.         :src="pdfSrc"
6.         :page="currentPage"
7.         @num-pages="onNumPagesLoaded"
8.         @page-rendered="pageRendered"
9.       ></pdf>
10.       <div class="pagination">
11.         <button :disabled="currentPage === 1" @click="previousPage">上一页</button>
12.         <span>{{ currentPage }} / {{ numPages }}</span>
13.         <button :disabled="currentPage === numPages" @click="nextPage">下一页</button>
14.       </div>
15.     </div>
16.   </el-dialog>
17. </template>
19. <script>
20. import Pdf from 'vue-pdf';
22. export default {
23.   components: {
24.     pdf: Pdf,
25.   },
26.   data() {
27.     return {
28.       openDetail: false,
29.       title1: 'PDF预览',
30.       pdfSrc: '', // PDF文件的URL
31.       currentPage: 1, // 当前显示的页码
32.       numPages: null, // PDF总页数
33.     };
34.   },
35.   methods: {
36.     fetchPDF() {
37.        this.pdfSrc = "http://服务器ip:8080/file/showPdf/"+"cs.pdf";
38.       window.open(this.pdfSrc)
39.     },
40.     showDetail() {
41.       this.fetchPDF();
42.       this.openDetail = true;
43.     },
44.     onNumPagesLoaded(numPages) {
45.       this.numPages = numPages;
46.       // 初始加载时尝试渲染第一页
47.       this.currentPage = 1;
48.     },
49.     pageRendered(num) {
50.       // 页面渲染完成后，更新当前页码
51.       this.currentPage = num;
52.     },
53.     previousPage() {
54.       if (this.currentPage > 1) {
55.         this.currentPage--;
56.       }
57.     },
58.     nextPage() {
59.       if (this.currentPage < this.numPages) {
60.         this.currentPage++;
61.       }
62.     },
63.   },
64. };
65. </script>

复制代码

结果预览：可点击翻页（可自己拓展滑动翻页）

 

前端实现2：JS打开新窗口

利用：window.open(url) 
可以点击按钮，利用window.open(url)来打开新页面展示pdf文件。
   window.open() -打开新窗口
常用于文件、图片预览，或者加载一个新页面。
  
用法：
  window.open(Url, WindowName, [strWindowFeatures]);
  
解释:
strUrl: 新窗口必要载入的url地点
strWindowName：新的窗口的名字，可选。
strWindowFeatures：新窗口的一些设置，可选。比如是否显示菜单栏，是否可以滚动和缩放窗口巨细等。
  
示例：
  window.open("http://www.baidu.com", "myWindow", "width=500,height=400,resizable=yes");
 
  详细可参考文章:Window的Open方法，弹窗的特征【超详细篇】_window open-CSDN博客 
 
遇到问题：

文件名为中文时，后端控制台异常

   遇到的问题与在利用Content-Disposition头部时编码非ASCII字符（比如中文文件名“仓库管理.pdf”）有关。错误消息表明，Unicode字符“仓”无法在HTTP头部预期的范围内正确编码。
  为相识决这个问题，应该正确地在Content-Disposition头部中编码文件名。
  
  以下是修改showPdf方法以正确处理包罗非ASCII字符文件名的步调：
  

• 确保利用UTF-8编码：利用Spring的UriUtils类中的UriUtils.encode方法，以UTF-8格式正确编码文件名。这将正确处理中文等特别字符。
  
• 修改Content-Disposition头部：利用UriUtils.encode来设置Content-Disposition头部，以正确编码文件名部分。
  

  以下是修改后的showPdf方法示例：
替换代码即可~
将

1. HttpHeaders headers = new HttpHeaders();
2. headers.add(HttpHeaders.CONTENT_DISPOSITION, "inline; filename=" + resource.getFilename());
3. headers.add(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_PDF_VALUE);
4.     return ResponseEntity.ok()
5.         .headers(headers)
6.         .body(resource);

复制代码

替换为

1.    HttpHeaders headers = new HttpHeaders();
2.    headers.add(HttpHeaders.CONTENT_DISPOSITION, "inline; filename*=UTF-8''" + UriUtils.encode(pdfName, StandardCharsets.UTF_8));
3.    headers.setContentType(MediaType.APPLICATION_PDF);
5.     return ResponseEntity.ok()
6.             .headers(headers)
7.             .contentLength(file.length())
8.             .body(resource);

复制代码

即可！！！
   解释：
  

• UriUtils.encode：该方法确保文件名中的非ASCII字符根据RFC 6266正确举行百分比编码，从而可以安全地在HTTP头部传输。
  
• Content-Disposition头部：filename参数指定了UTF-8编码的文件名。格式为filename=UTF-8’'<编码后的文件名>，其中<编码后的文件名>是文件名的UTF-8编码值。这确保了像“仓”这样的字符在头部中得到正确表现。
  
• MediaType.APPLICATION_PDF：指定相应体包罗PDF文件。
  

  通过正确编码文件名，您可以确保与HTTP标准的兼容性，并克制与无效头部值相关的错误。这种方法应该可以大概办理您在提供包罗中文或其他非ASCII字符文件名的PDF文件时遇到的问题。
  办理：报错消失！


小白一枚~

有问题及时改正，我会认真修改~




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