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=["*"