后端实现：

使用FileSystemResource包装文件，以便Spring MVC可以处理该资源

创建HttpHeaders对象以设置响应头

设置Content-Disposition头，使得浏览器以内联方式显示PDF（即在浏览器中直接打开）

设置Content-Type为application/pdf，指示响应体是一个PDF文件

构建并返回带有指定头信息和PDF资源的ResponseEntity，状态码为200 OK

后端java代码 ：

<code>package com.hm.wms.pdf.controller;

import org.mybatis.logging.Logger;

import org.mybatis.logging.LoggerFactory;

import org.springframework.core.io.*;

import org.springframework.http.*;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import java.io.File;

/**

* @author zy

*/

@RestController

@RequestMapping("/file")

public class PdfController {

//可以系统配置文件路径代替代码中的“E:/cs/”

/**

* 展示PDF文件

* 测试路径：本地E:/cs/cs.pdf 对应http://ip:端口/file/showPdf/文件名

* @param pdfName 文件名

* @return 响应实体，包含PDF文件的资源

*/

@GetMapping("/showPdf/{pdfName}")

public ResponseEntity<FileSystemResource> showPdf(@PathVariable("pdfName") String pdfName) {

if (!pdfName.endsWith(".pdf")) {

throw new RuntimeException("读取pdf文件失败，扩展名错误");

}

// 使用sanitizePath方法确保传入的pdfName路径安全，防止路径遍历等安全问题

String safeFilePath = sanitizePath("E:/cs/", pdfName);

// 根据处理后的安全路径创建File对象

File file = new File(safeFilePath);

// 检查文件是否存在并且是一个标准文件，若不满足条件则抛出异常

if (!file.exists() || !file.isFile()) {

throw new RuntimeException("文件未找到");

}

// 使用FileSystemResource包装文件，以便Spring MVC可以处理该资源

FileSystemResource resource = new FileSystemResource(file);

// 创建HttpHeaders对象以设置响应头

HttpHeaders headers = new HttpHeaders();

// 设置Content-Disposition头，使得浏览器以内联方式显示PDF（即在浏览器中直接打开）

headers.add(HttpHeaders.CONTENT_DISPOSITION, "inline; filename=" + resource.getFilename());

// 设置Content-Type为application/pdf，指示响应体是一个PDF文件

headers.add(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_PDF_VALUE);

// 构建并返回带有指定头信息和PDF资源的ResponseEntity，状态码为200 OK

return ResponseEntity.ok()

.headers(headers)

.body(resource);

}

/**

* 确保路径安全，防止路径遍历攻击。

*

* @param baseDir 基础目录

* @param filePath 文件路径

* @return 安全的文件路径

*/

private String sanitizePath(String baseDir, String filePath) {

// 确保filePath不会导致路径遍历，这里简单示例为拼接，实际应用中应使用更严格的安全策略

if (!filePath.startsWith("/") && !filePath.contains("..")) {code>

return baseDir + filePath;

}

throw new IllegalArgumentException("非法的文件路径");

}

}

测试： 

<code><template>

<el-dialog :title="title1" :visible.sync="openDetail" append-to-body>code>

<div>

<pdf

:src="pdfSrc" code>

:page="currentPage" code>

@num-pages="onNumPagesLoaded"code>

@page-rendered="pageRendered"code>

></pdf>

<div class="pagination">code>

<button :disabled="currentPage === 1" @click="previousPage">上一页</button>code>

<span>{ { currentPage }} / { { numPages }}</span>

<button :disabled="currentPage === numPages" @click="nextPage">下一页</button>code>

</div>

</div>

</el-dialog>

</template>

<script>

import Pdf from 'vue-pdf';

export default {

components: {

pdf: Pdf,

},

data() {

return {

openDetail: false,

title1: 'PDF预览',

pdfSrc: '', // PDF文件的URL

currentPage: 1, // 当前显示的页码

numPages: null, // PDF总页数

};

},

methods: {

fetchPDF() {

this.pdfSrc = "http://服务器ip:8080/file/showPdf/"+"cs.pdf";

window.open(this.pdfSrc)

},

showDetail() {

this.fetchPDF();

this.openDetail = true;

},

onNumPagesLoaded(numPages) {

this.numPages = numPages;

// 初始加载时尝试渲染第一页

this.currentPage = 1;

},

pageRendered(num) {

// 页面渲染完成后，更新当前页码

this.currentPage = num;

},

previousPage() {

if (this.currentPage > 1) {

this.currentPage--;

}

},

nextPage() {

if (this.currentPage < this.numPages) {

this.currentPage++;

}

},

},

};

</script>

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