PDF.js实现按需分片加载pdf文件

news/2024/2/23 15:52:36/文章来源:https://blog.csdn.net/twodogya/article/details/135624848

pdf.js实现按需、分片加载pdf文件

1.服务端配置

分片加载的实现是基于 HTTP-RANGE,即服务端的文件接口必须实现了HTTP-RANGE。

服务端文件接口实现HTTP-RANGE,需要服务端添加如下响应头

[{key: "Accept-Ranges",value: "bytes"},{key: "Access-Control-Expose-Headers",value: "Accept-Ranges,Content-Range"}
]

2.下载 releases

mozilla/pdf.js 的github仓库下载最新的 Releases

https://github.com/mozilla/pdf.js/releases

Releases

这里以 Vue 为例,其他前端框架同理

Releases 包解压后放至前端项目的 public 根目录下,如下图

根目录位置

3.PDF预览

在页面中用 iframe 形式引入 viewer.html 并传入需要预览的pdf地址

<script lang="ts" setup>
import { ref } from 'vue'
const pdfUrl = ref('http://127.0.0.1:2023/test.pdf')
</script>
<template><div class="w-full h-full"><iframe:src="`/pdfjs/web/viewer.html?file=${encodeURIComponent(pdfUrl)}`"frameborder="0"class="w-full h-full"></iframe></div>
</template>

打开网络请求面板,如果 pdf 文件的接口请求都是 206 状态码,说明分片加载成功

接口请求

点击单个请求,响应标头如下:

响应标头

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_925810.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++学习笔记——友元、嵌套类、异常

目录 一、友元 一个使用友元的示例代码 输出结果 二、嵌套类 一个使用嵌套类的示例代码 输出结果 三、异常 一个使用异常处理的示例代码 输出结果 四、结论 五、使用它们的注意事项 上一篇文章链接&#xff1a; C中的继承和模板是非常强大和灵活的特性&#xff0c;它…

03.用于LLMs不同的任务-transformer 架构

大多数现代LLMs都依赖于 transformer 架构,这是 2017 年论文 Attention Is All You Need 中介绍的深度神经网络架构。要理解LLMs,我们必须简要回顾一下最初的转换器,它最初是为机器翻译而开发的,将英语文本翻译成德语和法语。变压器架构的简化版本如图 1.4 所示。 图 1.4 …

Redis:原理速成+项目实战——Redis实战9(秒杀优化)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;Redis&#xff1a;原理速成项目实战——Redis实战8&#xff08;基于Redis的分布式锁及优化&#xff09; &#x1f4da;订阅专栏&…

springboot第49集:【思维导图】多线程,常用类与基础API,集合框架,泛型,数据结构源码...

多线程创建方式一&#xff1a;继承Thread类多线程创建方式二&#xff1a;实现Runnable接口jdk5.0新增两种创建多线程的方式 image.png image.png image.png image.png image.png new Thread(new Runnable() {public void run() {for (int i 1; i < 100; i) {if (i % 2 0) …

20240116使用Firefly的AIO-3399J的预编译的Android10固件确认RT5640声卡信息

20240116使用Firefly的AIO-3399J的预编译的Android10固件确认RT5640声卡信息 2024/1/16 17:55 百度&#xff1a;RK3399 ALC5640 RK3399 RT5640 BING&#xff1a;RK3399 ALC5640 LINE-IN接麦克风不会有声音的。 耳机只有右边有声音&#xff0c;但是偏小&#xff0c;可以通过音量…

在线SM2加签工具

在线SM2加签工具 - BTool在线工具软件&#xff0c;为开发者提供方便。本工具采用了国密局推荐的SM2签名算法&#xff0c;SM2签名算法是一种基于椭圆曲线密码体系的数字签名算法&#xff0c;是中国国家密码管理局制定的国密标准之一。SM2签名算法的安全性基于椭圆曲线离散对数问…

Elasticsearch Windows部署-ELK技术栈

1、下载Elasticsearch、kibana、logstash 本文不介绍ELK相关原理知识&#xff0c;只记录部署操作过程 下载地址Past Releases of Elastic Stack Software | Elastic 选择同一版本&#xff0c;这里选择是当前最新版本8.11.3 解压放在同目录下&#xff0c;方便后续操作与使用 …

【OpenAI】自定义GPTs应用(GPT助手应用)及外部API接口请求

11月10日&#xff0c;OpenAI正式宣布向所有ChatGPT Plus用户开放GPTs功能 简而言之&#xff1a;GPT应用市场(简称GPTs, 全称GPT Store) Ps&#xff1a; 上图为首次进入时的页面&#xff0c;第一部分是自己创建的GPTs应用&#xff0c;下面是公开可以使用的GPTs应用 一、创建GPTs…

HTML5+CSS3+JS小实例:音频可视化

实例:音频可视化 技术栈:HTML+CSS+JS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><m…

jmeter--4.参数化的方式

目录 1. 用户定义的变量 2. 用户参数 3. 函数助手 3.1 time获取当前时间 3.2 Random随机数 3.3 随机字符串函数 3.4 字符串变更为大写 4. CSV数据文件设置 5. 接口关联--正则和json等提取 1. 用户定义的变量 线程组->添加->配置元件->用户定义的变量 引用方…

HCIA——12题目-1章选择

学习目标&#xff1a; 计算机网络 1.掌握计算机网络的基本概念、基本原理和基本方法。 2.掌握计算机网络的体系结构和典型网络协议&#xff0c;了解典型网络设备的组成和特点&#xff0c;理解典型网络设备的工作原理。 3.能够运用计算机网络的基本概念、基本原理和基本方法进行…

【Linux】进程信号,相关函数的简单实用

文章目录 一、讨论范围二、信号的结构1.信号的本质2.预备知识2.1 如何发送信号2.2 如何查看后台程序 三、改变信号默认触发方式的两个函数1.signal2.sigaction 四、信号集操作函数和相关指令0.sigprocmask1.sigemptyset2.sigaddset3.sigdelset4.sigfillset 总结 一、讨论范围 编…

Android的setContentView流程

一.Activity里面的mWindow是啥 在ActivityThread的performLaunchActivity方法里面&#xff1a; private Activity performLaunchActivity(ActivityClientRecord r, Intent customIntent) {ActivityInfo aInfo r.activityInfo;if (r.packageInfo null) {r.packageInfo getP…

重学Java 7 数组Arr.1

我欲与君相知&#xff0c;长命无绝衰 ——24.1.16 一、数组的定义 1.概述&#xff1a;数组是一个容器&#xff0c;数组本身属于引用数据类型 2.作用&#xff1a;一次存储多个数据 3.特点&#xff1a; ①既可以存储基本类型的数据&#xff0c;也可以存储引用类型的数据 ②定长&a…

ACL【新华三与华为的区别】

【解释】acl简单点解释就是&#xff0c;一套根据需求而设置的规则 【背景】 192.168.1.0/24 网段不允许访问 192.168.2.0/24 网段&#xff0c;要求使用基本 ACL 实现20_1 可以访问 20_6 的 TELNET 服务&#xff0c;但不能访问 FTP 服务 【操作步骤】 {易混点 }&#xff1a;1. …

06--视图、索引、事务、权限

1、视图(view) 1.1 什么是视图 视图是一种根据查询&#xff08;也就是SELECT表达式&#xff09;定义的数据库对象&#xff0c;用于获取想要看到和使用的局部数据 视图有时也被成为“虚拟表”。 视图可以被用来从常规表&#xff08;称为“基表”&#xff09;或其他视图中查询…

k8s 存储卷和pvc,pv

存储卷---数据卷 容器内的目录和宿主机的目录进行挂载。 容器在系统上的生命周期是短暂的&#xff0c;deletek8s用控制器创建的pod&#xff0c;delete相当于重启&#xff0c;容器的状态也会回复到初始状态。 一旦回到初始状态&#xff0c;所有的后天编辑的文件的都会消失。 …

PySide6/PyQt6如何设置全局热键,全局热键!

文章目录 📖 介绍 📖🏡 环境 🏡📒 实现方法 📒⚓️ 相关链接 ⚓️📖 介绍 📖 我们在使用PySide6/PyQt6设置热键的时候一般都是使用QShortcut,、QKeySequence两个类来实现,但是这样写的快键键并不是全局快捷键,需要用户激活软件窗口才能实现快捷键对应的功能,…

【面试合集】说说微信小程序的发布流程?

面试官&#xff1a;说说微信小程序的发布流程&#xff1f; 一、背景 在中大型的公司里&#xff0c;人员的分工非常仔细&#xff0c;一般会有不同岗位角色的员工同时参与同一个小程序项目。为此&#xff0c;小程序平台设计了不同的权限管理使得项目管理者可以更加高效管理整个团…