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

如何用fastapi集成pdf.js 的viewer.html ，并支持 mjs

news 2025/9/14 18:09:41

在这里插入图片描述

fastapi 框架集成pdf.js 的 viewer.html?file=***，支持跨域，支持.mjs .wasm .pdf 给出完整示例代码

要在 FastAPI 框架中集成 pdf.js 的 viewer.html，并支持跨域访问以及 .mjs、.wasm、.pdf 文件的正确加载，可以按照以下步骤进行。下面提供一个完整的示例，包括项目结构、必要的配置以及完整的代码。

项目结构

假设项目目录如下：

your_project/
├── main.py
├── static/
│   ├── pdfjs/
│   │   ├── build/
│   │   │   ├── pdf.js
│   │   │   ├── pdf.worker.js
│   │   │   ├── pdf.worker.mjs
│   │   │   └── ...
│   │   ├── web/
│   │   │   ├── viewer.html
│   │   │   ├── viewer.js
│   │   │   ├── viewer.mjs
│   │   │   ├── viewer.wasm
│   │   │   └── ...
│   └── files/
│       └── sample.pdf

main.py: FastAPI 应用的主文件。
static/pdfjs/: 存放 pdf.js 的相关静态文件。
static/files/: 存放需要展示的 PDF 文件。

注意：你需要先下载 pdf.js 并将其解压到 static/pdfjs/ 目录下。

安装必要的依赖

首先，确保你已经安装了 fastapi 和 uvicorn。如果还没有安装，可以使用以下命令安装：

pip install fastapi uvicorn

如果你需要支持跨域请求，还需要安装 fastapi.middleware.cors.CORSMiddleware（实际上，fastapi 已经内置了 CORS 中间件支持，无需额外安装）。

`main.py` 完整示例代码

from fastapi import FastAPI, Request
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import FileResponse, RedirectResponse
from fastapi.staticfiles import StaticFiles
import osapp = FastAPI()# 配置允许的跨域源，* 表示允许所有
origins = ["*",# 若要限制特定域名，可以在这里添加，例如：# "http://localhost",# "http://localhost:8000",
]app.add_middleware(CORSMiddleware,allow_origins=origins,  # 允许的来源allow_credentials=True,allow_methods=["*"