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

server/2024/11/28 23:46:54/

在这里插入图片描述

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 完整示例代码

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

http://www.ppmy.cn/server/137671.html

相关文章

浅谈UI自动化

⭐️前言⭐️ 本篇文章围绕UI自动化来展开,主要内容包括什么是UI自动化,常用的UI自动化框架,UI自动化原理等。 🍉欢迎点赞 👍 收藏 ⭐留言评论 🍉博主将持续更新学习记录收获,友友们有任何问题…

【C++动态规划 分组背包】1981. 最小化目标值与所选元素的差|2009

本文涉及知识点 C动态规划 C背包问题 LeetCode1981. 最小化目标值与所选元素的差 给你一个大小为 m x n 的整数矩阵 mat 和一个整数 target 。 从矩阵的 每一行 中选择一个整数,你的目标是 最小化 所有选中元素之 和 与目标值 target 的 绝对差 。 返回 最小的绝…

Python For循环

Python 的 for 循环是自动化重复任务的强大工具,可以使代码更高效、更易于管理。本教程将解释 for 循环的工作原理,探讨不同的应用场景,并提供大量实用示例。无论你是初学者还是希望提升技能的开发者,这些示例都将帮助你更好地在 …

虚拟dom

是什么 描述真实DOM的javaScript对象 //虚拟dom描述的对象const vdom {tag: div,props: {onclick: () > alert(clicked),},children: ["click me"]}渲染器 将虚拟dom渲染成真实dom 实现思路 创建元素 将vnode.tag作为标签名来创建元素给元素添加属性与事件 …

TensorFlow_T4 猴痘病识别

目录 一、前言 二、前期准备 1、设置GPU 2、导入数据 3、查看数据 三、数据预处理 1、加载数据 2、可视化数据 3、再次检查数据 4、配置数据集 四、构建CNN网络 五、编译 六、训练模型 七、模型评估 1、Loss and Acurracy图 2、指定图片进行预测 一、前言 &#…

香港将承办2025年全运会项目

行政長官在去年的施政報告中,表明政府會繼續以精英化、專業化、盛事化、產業化和普及化推動本港體育發展。隨着啟德體育園啟用在即,明年舉辦的第十五屆全國運動會,香港也會承辦當中八個競賽項目,相信屆時會將香港市民對體育運動的…

Vue学习笔记(十五)

文章目录 3.4. 【reactive 创建:对象类型的响应式数据】3.5. 【ref 创建:对象类型的响应式数据】3.6. 【ref 对比 reactive】3.7. 【toRefs 与 toRef】3.8. 【computed】3.9.【watch】\* 情况一\* 情况二\* 情况三\* 情况四\* 情况五 3.10. 【watchEffec…

使用Navicat连接远程服务器中在docker中运行的MySQL数据库保姆级教程

使用Navicat连接远程服务器中在docker中运行的MySQL数据库保姆级教程 一、需要的资源 Navicat客户端(我使用的是17.0.8版本,安装教程B站搜一个,很快能解决)服务器(已安装docker并运行了MySQL) 二、步骤 …