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

原创

已于 2024-12-06 18:30:55 修改 · 1.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#fastapi #pdf #javascript #python

于 2024-10-28 18:49:25 首次发布

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 os

app = FastAPI()

# 配置允许的跨域源，* 表示允许所有
origins = [
    "*",
    # 若要限制特定域名，可以在这里添加，例如：
    # "http://localhost",
    # "http://localhost:8000",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,  # 允许的来源
    allow_credentials=True,
    allow_methods=["*"],    # 允许的方法