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
这里以 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 状态码，说明分片加载成功
点击单个请求，响应标头如下：文章来源：https://www.toymoban.com/news/detail-797832.html
文章来源地址https://www.toymoban.com/news/detail-797832.html
到了这里，关于PDF.js实现按需分片加载pdf文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
