前端使用pdf.js进行pdf文件预览的第二种方式:Viewer.html

背景

最近需要实现一个PDF文档预览的功能,按理说,如果只是简单的预览,使用<embed><object>等就可以实现。

但是,我们的需求要实现搜索!而且,文档还都超大,均300页以上。那<embed><object>就难以实现了!所以使用pdf.js库。

摘要

上一篇文章 前端 使用pdf.js加载PDF文件 中讲的是使用canvas绘图的方式,将PDF文件渲染在页面中。但其实PDF.js也提供了通过viewer.html来加载预览PDF文件,而且使用非常方便。

viewer.html很好用,但是我查遍了很多文档,真的都好难看懂是怎么使用的啊!那下面,我们把使用viewer.html的方法直接贴出来。

使用Viewer.html的好处

  1. 与我上一篇文章中提到的canvas绘图相比,性能肯定是比较好的;
  2. 自带了搜索、页面跳转、高亮等等工具栏,不需要手动实现了,这是莫大的便利。

viewer.html使用

第一步:pdf.js文档和文件包下载

  1. pdf.js文档: https://github.com/mozilla/pdf.js?tab=readme-ov-file,这个是pdf.js的readme.md地址,所有的使用指导在这里都可以找到。
  2. 文件包下载:你可以在上面的这个页面中找到。当然也可以在这个地址中:https://mozilla.github.io/pdf.js/getting_started/#download,选择stable下载。下载页面截图如下:
    在这里插入图片描述

第二步:下载到pdf.js按照包后,怎么使用呢?放在哪里

有两种方式:

1. 第一种方式:放在你当前项目的路径下,像下面这样:

在这里插入图片描述

说明:

  • pdfjs-4.0.379-dist是下载的pdf文件的夹,里面的viewer.html文件,就是它的入口文件。
2. 第二种方式:将它部署成为一个静态服务(这是本示例中我所使用的方式)

这样做的好处是:

  1. 对于当前项目,项目体量减小;
  2. 部署一个静态服务,多个项目可调用。便利性更好

题外话:将pdfjs部署在亚马逊

创建一个部署静态服务的存储桶,上传下载下来的文件包,如下所示:

在这里插入图片描述

这样一来,存放在该静态服务内的pdf文件都可以访问了。假设部署的服务地址是:http://xxx-pdf-viewer.s3-website-xx-xxx-xx.amazonaws.com/pdfjs-4.0.379-dist/web/viewer.html?file=docs/xxx.pdf

在这个路径中,docs文件夹位于web文件夹内,专门用来存放pdf文件。

第三步:使用viewer.html

通过iframe嵌入来使用viewer.html,使用方法很简单:

html:

<iframe :src="url" frameborder="0" width="100%" height="100%"></iframe>

JavaScript:计算url

const url = computed(() => {// 部署pdfjs的服务地址const aws_server = 'http://xxx-pdf-viewer.s3-website-xx-xxx-xx.amazonaws.com/pdfjs-4.0.379-dist/web/viewer.html'// pdf文件名称const pdf_name = 'x-trail-0601-20220911.pdf'return `${aws_server}?file=${encodeURIComponent(`docs/${pdf_name}`)}`
})

这样,就可以访问到docs文件夹下的所有pdf啦。简单吧!

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

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

相关文章

斯巴鲁Subaru EDI需求分析

斯巴鲁Subaru是日本运输集团斯巴鲁公司&#xff08;前身为富士重工&#xff09;的汽车制造部门&#xff0c;以性能而闻名&#xff0c;曾赢得 3 次世界拉力锦标赛和 10 次澳大利亚拉力锦标赛。 斯巴鲁Subaru EDI 需求分析 企业与斯巴鲁Subaru建立EDI连接&#xff0c;首先需要确…

bug fix:微信小程序从搜索栏搜索进入不触发onLaunch事件

最近遇到一个棘手的问题&#xff0c;发现一个诡异的 bug。经过深入排查&#xff0c;最终定位到问题出在小程序从微信小程序的搜索栏搜索进入时未触发 onLaunch 事件。 用户进入小程序时&#xff0c;会进行身份判断。对于特定身份&#xff0c;用户不会停留在首页&#xff0c;而…

Python无人自动驾驶无人信号灯

Python无人自动驾驶无人信号灯全套系统的重要性如下&#xff1a; 安全性&#xff1a;无人自动驾驶车辆需要准确地识别和理解交通信号灯&#xff0c;以便正确执行相应的操作。基于Python的无人信号灯系统可以使用计算机视觉技术来检测和识别信号灯&#xff0c;确保车辆能够正确地…

Vue ECharts 散点图上画一个圆形 - 附完整示例

ECharts&#xff1a;一个基于 JavaScript 的开源可视化图表库。 效果 一、介绍 1、官方文档&#xff1a;Apache ECharts Apache EChartsApache ECharts&#xff0c;一款基于JavaScript的数据可视化图表库&#xff0c;提供直观&#xff0c;生动&#xff0c;可交互&#xff0c;可…

Redis 单线程

文章目录 Redis单线程架构Redis 单线程访问速度IO多路复用原理 Redis单线程架构 Redis的单线程架构的效果为&#xff1a;Redis的单线程是对于服务端而言的&#xff0c;Redis允许多个Redis用户端同时在线操作&#xff0c;但同时只有一个用户端在和服务端交互。多个用户同时发送…

《Git 简易速速上手小册》第5章:高级 Git 技巧(2024 最新版)

文章目录 5.1 交互式暂存5.1.1 基础知识讲解5.1.2 重点案例&#xff1a;为 Python 项目分阶段提交5.1.3 拓展案例 1&#xff1a;细粒度控制更改5.1.4 拓展案例 2&#xff1a;处理遗漏的更改 5.2 使用 Rebase 优化提交历史5.2.1 基础知识讲解5.2.2 重点案例&#xff1a;整理 Pyt…

【工作学习 day04】 9. uniapp 页面和组件的生命周期

问题描述 uniapp常用的有&#xff1a;页面和组件&#xff0c;并且页面和组件各自有各自的生命周期函数&#xff0c;那么在页面/组件请求数据时&#xff0c;是用created呢&#xff0c;还是用onLoad呢&#xff1f; 先说结论: 组件使用组件的生命周期&#xff0c;页面使用页面的…

通俗易懂:快速排序算法全解析

快速排序&#xff08;Quick Sort&#xff09;是一种高效的分治排序算法&#xff0c;它以其出色的性能和广泛的应用而闻名。本文将深入讲解快速排序的原理、步骤和时间复杂度&#xff0c;并探讨其优势和应用场景。 快速排序原理 快速排序的核心思想是通过选择一个基准元素&…

(delphi11最新学习资料) Object Pascal 学习笔记---第4章第2.5节(重载和模糊调用)

4.2.5 重载和模糊调用 ​ 当调用一个重载的函数时&#xff0c;编译器通常会找到匹配的版本并正确工作&#xff0c;或者如果没有任何重载版本具有正确匹配的参数&#xff08;正如我们刚刚看到的&#xff09;&#xff0c;则会报出错误。 ​ 但还有第三种情况&#xff1a;假设编…

Go语言每日一练——链表篇(四)

传送门 牛客面试笔试必刷101题 ----------------合并两个排序的链表 题目以及解析 题目 解题代码及解析 package main import _"fmt" import . "nc_tools" /** type ListNode struct{* Val int* Next *ListNode* }*//*** 代码中的类名、方法名、参…

ClickHouse表常用引擎

1 TinyLog 特点&#xff1a; 是最简单的表轻量引擎&#xff08;最多约100万行&#xff09;, 一写多读的应用场景。同时读写会损害数据&#xff1b;TinyLog 表经常作为中间表&#xff0c;用于数据的微批量处理. 语法中无需携带任何参数&#xff1b;它将数据保存到磁盘. 每个字段…

【Docker】了解Docker Desktop桌面应用程序,TA是如何管理和运行Docker容器(2)

欢迎来到《小5讲堂》&#xff0c;大家好&#xff0c;我是全栈小5。 这是《Docker容器》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对…

Sqlite3安装步骤

1、Sqlite3以下载文件&#xff0c;配置环境变量的方式进行安装。 2、下方链接为官方的下载地址。 sqlite下载地址 2.1、需要两个下载文件&#xff0c;解压后将他们放在一起&#xff0c;假设解压后的路径为E:\sqlite。 sqlite-dll-win-x64-3450100.zip sqlite-tools-win-x6…

【数据结构】数据结构

本文是基于中国MOOC平台上&#xff0c;华中科技大学的《数据结构》课程和浙江大学的《数据结构》课程所作的一篇课程笔记&#xff0c;便于后期讲行系统性查阅和复习。 从个人感受而言&#xff0c;华中科技大学的课程讲解更适合初学者&#xff08;缺点在于&#xff0c;从概念到…

linux 07 存储管理

02. ext4是一种索引文件系统 上面是索引节点inode&#xff0c;存放数据的元数据 下面是存储块block&#xff0c;主要存放有关的信息 03.linux上的inode 查看文件中的inode ll -i 文件名 磁盘中的inode与文件数量

STM32学习笔记——定时器

目录 一、定时器功能概述 1、基本定时器&#xff08;TIM6&TIM7&#xff09; 工作原理 时序 2、通用计时器&#xff08;TIM2&TIM3&TIM4&TIM5&#xff09; 时钟源 外部时钟源模式1&2 外部时钟源模式2 外部时钟源模式1 定时器的主模式输出 输入捕获…

C++的多态(Polymorphism)

C中的多态&#xff08;Polymorphism&#xff09;是面向对象编程的一个重要概念&#xff0c;它允许以不同的方式使用同一个接口来处理不同类型的对象。多态性可以通过函数重载、运算符重载和虚函数实现。 多态的基本概念是&#xff1a;通过基类的指针或引用&#xff0c;可以在运…

linux系统非关系型数据库redis去中心化模式

redis去中心化模式 去中心化模式配置文件更改增加节点添加主节点添加从节点分配槽位 减少节点回收槽位下线主机 去中心化模式 配置文件更改 每个节点的配置文件更改 vim redis.confport 7001 #该节点端口 cluster-enabled yes cluster-config-file nodes.conf cluster-nod…

Oracle PL/SQL Programming 第6章:Exception Handlers 读书笔记

总的目录和进度&#xff0c;请参见开始读 Oracle PL/SQL Programming 第6版 无论如何努力&#xff0c;您的程序中总会再出现一个错误。但我们仍应实现调试和保护我们的程序。PL/SQL 提供了一种强大而灵活的方法来捕获和处理错误。 Exception-Handling Concepts and Terminolo…

如何将ChatGPT升级到4.0版本?如何充值?

如何将ChatGPT升级到4.0版本&#xff1f; 在人工智能的世界里&#xff0c;每一个升级都可能带来革命性的变革。ChatGPT的4.0版本无疑是当前最炙手可热的话题之一&#xff0c;那么如何进行升级&#xff0c;体验到这一版所带来的全新特性呢&#xff1f;以下是一步一步的指南。 …