根据后端返回的文件流，前端可以预览该文件

### 前端基于后端文件流实现文件预览的技术方案 #### PDF 文件预览 对于 React 应用中的 PDF 预览需求，可以通过 `react-pdf` 这一库来实现。该库允许开发者轻松嵌入 PDF 文档到网页中，并支持分页显示以及样式定制等功能[^1]。 以下是使用 `react-pdf` 的基本代码示例： ```javascript import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'; import axios from 'axios'; const PdfPreview = ({ pdfUrl }) => { const [numPages, setNumPages] = useState(null); const [pageNumber, setPageNumber] = useState(1); function onDocumentLoadSuccess({ numPages }) { setNumPages(numPages); } useEffect(() => { async function fetchPdf() { try { const response = await axios.get(pdfUrl, { responseType: 'arraybuffer' }); const uint8Array = new Uint8Array(response.data); // 将二进制数据转换为 Blob 对象以便于 react-pdf 使用 const blob = new Blob([uint8Array], { type: 'application/pdf' }); const url = URL.createObjectURL(blob); console.log(url); // 可用于传递给 react-pdf 组件 } catch (error) { console.error('Error fetching the PDF:', error); } } fetchPdf(); }, []); return ( <div> <Document file={pdfUrl} onLoadSuccess={onDocumentLoadSuccess}> <Page pageNumber={pageNumber} /> </Document> <p>Page {pageNumber} of {numPages}</p> </div> ); }; ``` 上述代码展示了如何从前端接收来自后端的 PDF 流并将其展示出来。需要注意的是，PDF 数据通常以二进制形式传输，因此需要处理成适合前端使用的格式（如 Blob 或者 ArrayBuffer），再交给 `react-pdf` 渲染。 --- #### Excel 表格文件预览 针对 Vue.js 开发环境下的 Excel 文件预览功能，则推荐采用第三方库 `SheetJS`（即 `xlsx`）。此方法能够解析 `.xls` 和 `.xlsx` 类型的数据，并在页面上动态呈现其内容[^2]。 下面是一个简单的例子演示如何利用 API 接口获取 Excel 文件流并在前端完成渲染过程： ```javascript <template> <div id="app"> <table v-if="data.length > 0" border="1"> <thead> <tr> <th v-for="(header, index) in headers" :key="index">{{ header }}</th> </tr> </thead> <tbody> <tr v-for="(row, rowIndex) in data" :key="rowIndex"> <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td> </tr> </tbody> </table> </div> </template> <script> import XLSX from 'xlsx'; export default { name: 'App', data() { return { data: [], headers: [] }; }, methods: { fetchDataFromApi(apiEndpoint) { fetch(apiEndpoint, { method: 'GET' }) .then((response) => response.arrayBuffer()) .then((arrayBuffer) => this.parseExcel(arrayBuffer)) .catch((err) => console.error(err)); }, parseExcel(buffer) { /* 解析工作簿 */ let workbook = XLSX.read(buffer, { type: 'array', bookSheets: true }); /* 获取第一个表单的名字 */ let firstSheetName = workbook.SheetNames[0]; /* 转换 JSON 格式 */ let worksheet = workbook.Sheets[firstSheetName]; let jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); if (jsonData && jsonData.length >= 1) { this.headers = jsonData[0]; // 设置头部信息 this.data = jsonData.slice(1); // 提取实际数据部分 } } }, mounted() { this.fetchDataFromApi('/api/excel'); // 替换成您的API路径 } }; </script> ``` 在这个案例里，我们通过 Fetch 请求从服务器拉取 Excel 文件作为字节数组缓冲区，随后借助 SheetJS 工具包读取出具体的单元格数值列表，最后映射至 HTML `<table>` 结构之中予以可视化表现。 --- #### 技术选型总结 无论是 PDF 还是 Excel 文件的在线预览，都离不开以下几个核心环节： - **文件流请求**：通过 HTTP 协议向服务端发起 GET 请求，指定响应类型为 binary/arraybuffer。 - **客户端解析与转化**：依据不同类型的文档选用对应的 JavaScript 插件来进行解码操作。 - **UI 层面集成**：最终把经过加工后的结构化数据绑定到视图组件上去展现给终端用户看。 以上便是关于如何依靠后端所提供的文件流传回机制达成高效便捷的前端文件浏览体验的整体思路概述。