changelog: 保单PDF预览前端渲染问题
后端返回正确PDF流,前端需用iframe或复用PDF预览组件渲染。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
这个提交包含在:
父节点
70cf4ac59b
当前提交
fdf60e1566
@ -0,0 +1,49 @@
|
|||||||
|
# 保单PDF预览"暂不支持在线预览"— 前端渲染问题
|
||||||
|
|
||||||
|
**日期**: 2026-03-23
|
||||||
|
**类型**: 前端 BUG
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 问题
|
||||||
|
|
||||||
|
保单 PDF 预览弹窗显示"该文件类型暂不支持在线预览",但后端已正确返回 539KB 的 PDF 二进制流。
|
||||||
|
|
||||||
|
## 对比
|
||||||
|
|
||||||
|
| 场景 | 接口 | 大小 | 结果 |
|
||||||
|
|------|------|------|------|
|
||||||
|
| 素材PDF(能预览) | `/{fileId}/preview` | 1815KB | ✅ PDF预览组件正常渲染 |
|
||||||
|
| 保单PDF(不能预览) | `/preview-by-url?url=` | 539KB | ❌ 显示"暂不支持" |
|
||||||
|
|
||||||
|
两个接口返回的都是 PDF 二进制流(Content-Type: application/pdf),后端没区别。
|
||||||
|
|
||||||
|
## 原因
|
||||||
|
|
||||||
|
前端对 `/{fileId}/preview` 用了 PDF 预览组件(如 pdf.js),但对 `preview-by-url` 没有走相同的渲染逻辑。
|
||||||
|
|
||||||
|
## 修复方式(任选一种)
|
||||||
|
|
||||||
|
### 方式1:iframe 直接显示(最简单)
|
||||||
|
```javascript
|
||||||
|
// 弹窗内用 iframe,浏览器原生支持 PDF 渲染
|
||||||
|
<iframe
|
||||||
|
:src="`/api/admin/file/preview-by-url?url=${encodeURIComponent(ossUrl)}`"
|
||||||
|
width="100%"
|
||||||
|
height="600px"
|
||||||
|
style="border: none;"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 方式2:复用现有 PDF 预览组件
|
||||||
|
```javascript
|
||||||
|
// 把 preview-by-url 的 URL 当作 pdf src 传给已有的 PDF 预览组件
|
||||||
|
const pdfSrc = `/api/admin/file/preview-by-url?url=${encodeURIComponent(ossUrl)}`;
|
||||||
|
// 传给 pdf-preview 组件,和 /{fileId}/preview 一样处理
|
||||||
|
```
|
||||||
|
|
||||||
|
### 方式3:直接用 OSS URL
|
||||||
|
保单 PDF 存在公开读的 OSS 上,也可以直接用 OSS URL:
|
||||||
|
```javascript
|
||||||
|
<iframe :src="ossUrl" width="100%" height="600px" />
|
||||||
|
```
|
||||||
正在加载...
x
在新工单中引用
屏蔽一个用户