当前位置：首页 > news >正文

PDF 组件里文字没渲染出来，只显示了线条（或者空白）

news 2026/5/27 20:14:19

PDF 组件里文字没渲染出来，只显示了线条（或者空白），但浏览器直接打开完全正常，这是 Vue3 中 PDF.js 系列组件非常典型的问题。

方案 1：修复中文字体渲染（必试）

这是 90% 中文字体不显示问题的解决方法。

1. 配置 PDF.js 的字体映射

如果你用的是vue3-pdf-app，它底层依赖 PDF.js，可以直接配置字体：

<template> <div style="height: 800px;"> <vue3-pdf-app :src="pdfUrl" /> </div> </template> <script setup> import { Vue3PdfApp } from 'vue3-pdf-app' import 'vue3-pdf-app/dist/index.css' import pdfjsLib from 'pdfjs-dist/build/pdf' import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry' // 关键：配置 worker 和字体 pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker // 开启字体解析（针对中文） pdfjsLib.disableWorker = false pdfjsLib.cMapUrl = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/cmaps/' pdfjsLib.cMapPacked = true const pdfUrl = '你的PDF地址' </script>

2. 后端生成 PDF 时嵌入字体（根治方案）

最彻底的解决方法是在后端生成 PDF 时，把中文字体嵌入进去，这样前端无论用什么阅读器都能正常显示。

Java iText：FontFactory.register("simhei.ttf");并设置BaseFont.EMBEDDED
Puppeteer：确保 PDF 使用的字体在服务器上存在，或使用系统字体
Wkhtmltopdf：添加--enable-local-file-access并指定字体路径

方案 2：改用 iframe 预览（最快验证+兜底方案）

如果不想折腾字体问题，直接用浏览器原生的 iframe，100% 兼容中文字体，不会出现渲染问题：

<template> <iframe :src="pdfUrl" width="100%" height="800px" frameborder="0" /> </template> <script setup> const pdfUrl = '你的PDF地址' </script>

✅ 优点：零依赖、零配置、永远兼容中文字体
❌ 缺点：无法自定义样式、工具栏有限

方案 3：检查后端响应头

让后端确认返回的 PDF 响应头包含以下内容：

Content-Type: application/pdf Content-Disposition: inline; filename="report.pdf" Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, OPTIONS

如果是 Spring Boot 后端，可以这样配置：

@GetMapping("/api/pdf")publicResponseEntity<Resource>getPdf(){// ... 读取文件流HttpHeadersheaders=newHttpHeaders();headers.setContentType(MediaType.APPLICATION_PDF);headers.setContentDispositionFormData("inline","report.pdf");returnnewResponseEntity<>(resource,headers,HttpStatus.OK);}