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

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

要在 FastAPI 框架中集成 pdf.jsviewer.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/ 目录下。

安装必要的依赖

首先,确保你已经安装了 fastapiuvicorn。如果还没有安装,可以使用以下命令安装:

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=["*"],    # 允许的方法
在uni-app中操作PDF.js的`viewer.mjs`文件中的 `localStorage.setItem` 数据,通常需要结合浏览器端的行为以及前端框架的能力来完成。以下是具体的步骤说明: ### 获取 `localStorage.setItem` 的数据 1. **理解 PDF.js 中的数据存储** 如果你在使用 PDF.js 且它通过 `viewer.mjs` 设置了某些值到 `localStorage` 中,那么你可以直接利用 JavaScript 访问 `localStorage` 来读取这些值。 2. **访问 localStorage** 在 uni-app 环境下运行时,如果项目中有 H5 页面,加载了 PDF.js,则可以直接使用以下代码片段从 `localStorage` 中提取对应键名下的数据: ```javascript // 假设 viewer.mjs 使用的是 'pdfViewerState' 键 const pdfViewState = localStorage.getItem('pdfViewerState'); if (pdfViewState) { console.log("已找到存储的数据:", JSON.parse(pdfViewState)); } else { console.warn("未发现指定 key 下的相关数据"); } ``` 3. **实时监听 localStorage 变化** 若要监控页面上所有对 `localStorage` 操作的变化(例如每次设置项),可以覆盖默认的 `setItem` 方法插入自定义逻辑: ```javascript (function() { let originalSetItem = Storage.prototype.setItem; Storage.prototype.setItem = function(key, value) { console.info(`检测到新增或修改本地存储:key=${key}, value=${value}`); // 调用原始 setItem 函数以保持正常功能 return originalSetItem.apply(this, arguments); }; })(); ``` 4. **跨平台兼容注意事项** - 需要注意的是,在非H5环境如小程序、App等场景内,`localStorage` 功能会被模拟实现甚至完全禁用;此时应考虑改用自己的缓存管理方案替代系统提供的原生 API。 - 若目标设备不允许直接触碰 DOM 或 BOM 属性(比如部分加固后的 Android 应用容器限制对外部资源的操作权限),则尝试引入第三方工具库或者调整架构设计将关键业务迁移到云端处理更为稳妥。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风翔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值