vue 预览后端返回的pdf

### 实现 Vue 中预览后端返回的 PDF 文件 为了实现在 Vue 应用程序中预览从后端接口获取的 PDF 文件，可以采用多种方法。以下是基于不同场景和技术栈的具体实现方式。 #### 方法一：使用 `vue-pdf` 插件处理 PDF 流数据 当后端直接返回 PDF 的二进制流时，可以通过 `vue-pdf` 来解析并显示 PDF 文档。此插件依赖于浏览器环境中的 PDF.js 工具库来渲染 PDF 页面[^1]。 ```javascript // main.js 或 setup 部分配置 vue-pdf 和 CMapReaderFactory import pdf from "vue-pdf-cs"; import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory'; Vue.use(pdf); ``` 接着，在组件内部定义用于加载和展示 PDF 的逻辑： ```html <template> <div id="pdf-viewer"> <!-- 使用 vue-pdf 提供的 PdfComponent 组件 --> <pdf v-for="i in numPages" :key="i" :src="pdfSrc"></pdf> </div> </template> <script> export default { data() { return { pdfSrc: null, numPages: undefined }; }, methods: { loadPdf(url) { const loadingTask = pdf.createLoadingTask(url); loadingTask.promise.then(pdf => { this.numPages = pdf.numPages; this.pdfSrc = loadingTask; }); } }, mounted() { // 调用 API 获取 PDF 并传递给 createLoadingTask 函数 fetch('/api/get_pdf') .then(response => response.blob()) .then(blob => URL.createObjectURL(blob)) .then(url => this.loadPdf(url)); } }; </script> ``` 这种方法适用于需要更细粒度控制的情况，比如自定义样式或交互行为。 #### 方法二：利用 `<iframe>` 标签嵌入 PDF URL 如果后端提供了可以直接访问的 PDF 文件链接，则最简单的方式就是通过 HTML 的 `<iframe>` 元素来进行内联查看[^2]。 ```html <!-- 直接指定 src 属性为服务器上的 PDF 地址即可 --> <iframe width="100%" height="600px" frameborder="no" :src="'https://example.com/path/to/pdf'" /> ``` 这种方式的优点在于无需额外安装任何第三方库，并且兼容性较好；缺点则是对于跨域资源可能受到同源策略限制。 #### 方法三：结合 Axios 请求与 Blob 对象创建临时对象地址 针对某些情况下后端仅提供 POST 接口而无法直接给出静态文件路径的情形下，可借助 JavaScript 的 Fetch API 发送请求获得 PDF 数据后再转换成可用于浏览的对象 URL[^4]。 ```javascript // 定义一个异步函数用来发起 HTTP 请求并生成 Object URL async function getPdfUrl(apiEndpoint, requestData={}) { try { const res = await axios({ url: apiEndpoint, method: 'POST', data: JSON.stringify(requestData), responseType: 'blob' }); // 创建一个新的 object URL 表示传入的 File/Blob 对象。 const blob = new Blob([res.data], { type: 'application/pdf' }); return window.URL.createObjectURL(blob); } catch(error){ console.error('Failed to get PDF:', error.message); } } ``` 之后可以在模板里绑定这个动态生成的 URL 到 iframe 上： ```html <template> <div class="preview-container"> <iframe ref="pdfFrame" style="width:100%;height:80vh;" /> </div> </template> <script> ... mounted(){ getPdfUrl('/api/Order/OrderPrint', somePayload).then((url)=>{ this.$refs['pdfFrame'].setAttribute('src', url); }) }, beforeDestroy(){ // 清理不再使用的 Object URLs if(this.generatedPdfUrl){ window.URL.revokeObjectURL(this.generatedPdfUrl); } } ... </script> ``` 以上三种方案各有优劣，具体选择取决于实际应用场景以及前后端之间的协作模式等因素考虑。