分享基于PDF.js的pdf阅读器代码

一、前言

有时候开发PC端web页面的时候会遇到PDF预览、下载等功能,为了兼容浏览器,需要找一款前端插件进行开发。比较好的PDF插件,就是mozillapdf.js(注意是mozilla,如果你百度遇到需要收费的,那应该是下载错了)。而从mozillaGithub仓库去找想要的代码,如果你不熟悉,想直接使用的话还是有一些麻烦的。

二、pdfViewer

为了能够直接使用,这里分享一下经过简单修改后能直接使用的pdfViewer代码:

pdfViewer代码目录(pdfViewer代码包本文查看附件):

以Vue工程为例:

①将pdfViewer代码放到pubilc目录下(pdfViewer代码包本文查看附件)

②使用下面的链接进行pdf访问:http://xxx/pdfViewer/web/viewer.html?file=pdfUrl

其中,http://xxx 为项目访问地址。

预览效果:

注意:

①上述预览使用file:///D:/workspace/study/pdfViewer/web/viewer.html?file=D:\workspace\study\pdfViewer\demo.pdf能直接在浏览器打开,是因为本人浏览器做了跨域允许。一般浏览器是不能使用上述方式直接打开的,需要用http(https)的方式去预览,即:http://xxx/pdfViewer/web/viewer.html?file=pdfUrl

pdfViewer代码只在PC上使用,其页面样式在移动端有兼容问题。移动端有对应的代码包,以后有时间再整理。

相关推荐
ZC跨境爬虫1 小时前
Playwright进阶操作:鼠标拖拽与各类点击实战(含自定义拖拽实例)
前端·爬虫·python·ui
小江的记录本1 小时前
【RabbitMQ】RabbitMQ核心知识体系全解(5大核心模块:Exchange类型、消息确认机制、死信队列、延迟队列、镜像队列)
java·前端·分布式·后端·spring·rabbitmq·mvc
心静财富之门1 小时前
《前端零基础入门:HTML + CSS + JavaScript 全套速查表(详细版 + 实例)》
前端·javascript·python
星空1 小时前
前端--A_4--HTML表单
前端
Ofm1z1Q9R1 小时前
python-langchain框架(3-5-pdf文件load_and_split()加载 )
python·langchain·pdf
We་ct1 小时前
JS手撕:DOM操作 & 浏览器API高频场景详解
开发语言·前端·javascript·面试·状态模式·操作·考点
小江的记录本1 小时前
【RocketMQ】RocketMQ核心知识体系全解(5大核心模块:架构模型、事务消息两阶段提交、回查机制、延迟消息、顺序消息)
linux·运维·服务器·前端·后端·架构·rocketmq
三万棵雪松1 小时前
【Linux 物联网网关主控系统-Web部分(二)】
linux·前端·物联网
We་ct1 小时前
LeetCode 137. 只出现一次的数字 II:从基础到最优的两种解法详解
前端·数据结构·算法·leetcode·typescript·位运算
星空2 小时前
前端--A_3--HTML区块_块元素与行内元素
前端·html