前端使用PDF.js把返回的base64或二进制文件流格式,实现pdf文件预览
pdf文件预览
- 简单了解PDF.js
- 代码实现
- 首先,引入依赖
- 实现预览逻辑
简单了解PDF.js
PDF.js是一个JavaScript库,可在浏览器中无插件显示PDF文件,提供缩放、翻页、文本搜索等功能。本文介绍了其基本使用方法和示例代码,如添加翻页和搜索功能。
PDF.js的主要功能包括:
- 在浏览器中显示PDF:PDF.js使用HTML5的canvas元素来呈现PDF页面,使得用户可以在浏览器中直接查看PDF文件,而无需依赖外部的PDF阅读器插件
- 支持基本的浏览功能:PDF.js提供了一套用户界面,包括缩放、滚动、翻页等浏览功能,使用户能够方便地导航和浏览PDF文件。
- 支持文本搜索:PDF.js可以对PDF文件进行文本搜索,用户可以输入关键字来查找并定位到相应的内容。
- 支持页面导航:PDF.js提供了页面导航功能,用户可以跳转到特定的页面,或者在查看多页PDF时进行翻页。
- 支持缩放和旋转:PDF.js允许用户调整PDF页面的缩放级别,并可以旋转页面以适应不同的阅读需求。
- 支持批注和标记:PDF.js可以让用户在PDF文件中进行批注和标记,例如划线、画框、添加注释等,以便在阅读或共享时进行交流和标记重点。
下面会把简单时间文件预览的代码呈现出来,如果您想要进一步优化和学习PDF.js,可以打开官方文档学习;
代码实现
我这个举例的项目是一个H5,但是引入的有vue,所以写法是在H5的页面使用vue;
首先,引入依赖
<script src='../../js/vue.js'></script>
<script src="../../js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js"></script>
如果您使用的是纯vue项目可以通过npm/pnpm/yarn安装依赖
实现预览逻辑
<div style="width: 100%;" id="pdfPreview"></div>
mounted() {const fileId = getParam("fileId")this.getFile(fileId)},
methods:{$.ajax({url:"/api-file/file/getFileByte",type: 'post',responseType:'blob',data: {fileId: fileId,},beforeSend: function (request) {request.setRequestHeader("Authorization", "Bearer " + JSON.parse(window.sessionStorage.getItem('store') || '{}').token);},success:(res) => {// 将Base64字符串转换为二进制字符串const path = res.dataconst raw = window.atob(path);const rawLength = raw.length;const uInt8Array = new Uint8Array(rawLength);for (let i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i);}const loadingTask = pdfjsLib.getDocument({data: uInt8Array})loadingTask.promise.then(function(pdf){// 获取 PDF 的页数var numPages = pdf.numPages;// 遍历每一页for (var pageNumber = 1; pageNumber <= numPages; pageNumber++) {pdf.getPage(pageNumber).then(function(page) {var viewport = page.getViewport({scale: 1.5});// 创建canvas元素var canvas = document.createElement('canvas');// 获取目标元素var target = document.getElementById('pdfPreview');// 将canvas元素插入到目标元素中target.appendChild(canvas);var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;// 渲染页码var renderContext = {canvasContext: context,viewport: viewport};page.render(renderContext).promise.then(function() {console.log('PDF 预览成功!');});});}}).catch(function(error) {// 错误处理console.error('加载PDF时发生错误: ', error);});},error:(err) => {alert('文件加载失败,请稍后重试!')}
}
上面代码只是简单的展示出来文件,没有实现分页,和缩放,如果需要可以自己去查询一下;
相关文章:
前端使用PDF.js把返回的base64或二进制文件流格式,实现pdf文件预览
pdf文件预览 简单了解PDF.js代码实现首先,引入依赖实现预览逻辑 简单了解PDF.js PDF.js是一个JavaScript库,可在浏览器中无插件显示PDF文件,提供缩放、翻页、文本搜索等功能。本文介绍了其基本使用方法和示例代码,如添加翻页和搜…...
如何利用 Python 的爬虫技术获取淘宝天猫商品的价格信息?
以下是使用 Python 的爬虫技术获取淘宝天猫商品价格信息的两种常见方法: 方法一:使用 Selenium 一、环境准备: 安装 selenium 库:在命令行中运行 pip install selenium。下载浏览器驱动:如 ChromeDriver(确…...
论文阅读笔记:Activating More Pixels in Image Super-Resolution Transformer
论文阅读笔记:Activating More Pixels in Image Super-Resolution Transformer 1 背景1.1 问题1.2 提出的方法 2 创新点3 方法4 模块4.1 混合注意力模块(HAB)4.2 重叠交叉注意力模块(OCAB)4.3 同任务预训练 5 效果5.1 …...
VSCode 与 HBuilderX 介绍
Visual Studio Code (VSCode) Visual Studio Code (VSCode) 是一款由 Microsoft 开发的源代码编辑器,支持多种编程语言,并且是免费和开源的。它在开发者社区中非常受欢迎,因其强大的功能和高度的可定制性而受到赞誉。 特点 轻量级且强大&am…...
《Vision Transformer with Deformable Attention》论文翻译
原文链接:https://doi.org/10.1109/cvpr52688.2022.00475 author{Zhuofan Xia and Xuran Pan and Shiji Song and Li Erran Li and Gao Huang} 一、介绍 Transformer最初是为了处理自然语言处理任务而提出的。最近,它在计算机视觉领域展示了巨大的潜力。先锋工作V…...
爬虫下载网页文夹
爬虫下载网页pdf文件 import os import requests from bs4 import BeautifulSoup from urllib.parse import urljoin from urllib.parse import urljoin, unquote from tqdm import tqdm # 设置网页的URL base_url "http://119/download/dzz/pdf/"# 创建保存文件的…...
深入探讨钉钉与金蝶云星空的数据集成技术
钉钉报销数据集成到金蝶云星空的技术案例分享 在企业日常运营中,行政报销流程的高效管理至关重要。为了实现这一目标,我们采用了轻易云数据集成平台,将钉钉的行政报销数据无缝对接到金蝶云星空的付款单系统。本次案例将重点介绍如何通过API接…...
小语言模型介绍与LLM的比较
小模型介绍 小语言模型(SLM)与大语言模型(LLM)相比,具有不同的特点和应用场景。大语言模型通常拥有大量的参数(如 GPT-3 拥有 1750 亿个参数),能够处理复杂的自然语言任务ÿ…...
ThreadLocal从入门到精通
1.ThreadLocal是什么 ThreadLocal 是 Java 提供的一个用于线程存储本地变量的类。它为每个线程提供独立的变量副本,确保变量在多线程环境下的线程安全。每个线程访问 ThreadLocal 时,都会有自己专属的变量副本,互不干扰,避免了并…...
小新学习k8s第六天之pod详解
一、资源限制 Pod是k8s中的最小的资源管理组件,pod也是最小化运行容器化应用的资源对象。一个Pod代表着集群中运行的一个进程。k8s中其他大多数组件都是围绕着Pod来进行支撑和扩展Pod功能的,例如,用于管理Pod运行的StatefulSet和Deployment等…...
9、node.js和Lowdb
六、Lowdb 一个简单的Json数据库 6.1安装lowdb npm i lowdb1.0.06.2初始化 //引入lowdb const low require(lowdb) const FileSync require(lowdb/adapters/FileSync) //指定数据文件 const adapter new FileSync(db.json) //创建db对象 const db low(adapter)//初始化…...
WebAPI编程(第五天,第六天,第七天)
WebAPI编程(第五天,第六天,第七天) **day05 - Web APIs****1.1. **元素偏移量 offset 系列1.1.1 offset 概述1.1.2 offset 与 style 区别offsetstyle 1.1.3 案例:获取鼠标在盒子内的坐标1.1.4 案例:模态框拖…...
香港服务器网络延迟的测量指标包括哪些?
网络延迟是影响香港服务器性能和用户体验的关键因素。网络延迟是指数据包从源头传输到目的地所需的时间。延迟的产生可能受到多种因素的影响,包括网络拥塞、传输媒介、路由器处理时间等。理解延迟的不同测量指标是评估和优化网络性能的重要基础。 主要测量指标&…...
【综合案例】使用React编写B站评论案例
一、效果展示 默认效果,一开始默认按照最热进行排序 发布了一条评论 按照最新进行排序 按照最新进行排序 二、效果说明 页面上默认有3条评论,且一开始进入页面的时候是按照点赞数量进行倒序排列展示,可以点击【最热 、最新】进行排序的切换。…...
【AIGC】腾讯云语音识别(ASR)服务在Spring Boot项目中的集成与实践
腾讯云语音识别(ASR)服务在Spring Boot项目中的集成与实践 引言 在现代软件开发中,语音识别技术的应用越来越广泛,从智能助手到自动客服系统,语音识别技术都在发挥着重要作用。腾讯云提供了强大的语音识别服务&#…...
基于 Vue3、Vite 和 TypeScript 实现开发环境下解决跨域问题,实现前后端数据传递
引言 本文介绍如何在开发环境下解决 Vite 前端(端口 3000)和后端(端口 80)之间的跨域问题: 在开发环境中,前端使用的 Vite 端口与后端端口不一致,会产生跨域错误提示: Access to X…...
前端面筋(持续更新)
额外面筋 get和post的区别?怎么理解get能被缓存? get请求和post同属于http中的两种请求,在传输上没有什么区别,只是约定有所不同get请求一般用于向服务器请求数据 post请求一般用于向服务器提交数据get请求的参数一般不安全&…...
深度学习-迁移学习
深度学习中的迁移学习是通过在大规模数据上训练的模型,将其知识迁移到数据相对较少的相关任务中,能显著提升目标任务的模型性能。 一、迁移学习的核心概念 源任务(Source Task)与目标任务(Target Task)&…...
6.0、静态路由
路由器最主要的功能就是转发数据包。路由器转发数据包时需要查找路由表(你可以理解为地图),管理员可以直接手动配置路由表,这就是静态路由。 1.什么是路由? 在网络世界中,路由是指数据包在网络中的传输路…...
Redis学习:BitMap/HyperLogLog/GEO案例 、布隆过滤器BloomFilter、缓存预热+缓存雪崩+缓存击穿+缓存穿透
Redis学习 文章目录 Redis学习1、BitMap/HyperLogLog/GEO案例2. 布隆过滤器BloomFilter3. 缓存预热缓存雪崩缓存击穿缓存穿透 1、BitMap/HyperLogLog/GEO案例 真实需求面试题 亿级数据的收集清洗统计展现对集合中数据进行统计,基数统计,二值统计…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件: 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
html-<abbr> 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词,它可以帮助用户更好地理解缩写的含义,尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时,会显示一个提示框。 示例&#x…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言: 在Java编程中,类的生命周期是指类从被加载到内存中开始,到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期,让读者对此有深刻印象。 目录 …...
