分享基于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上使用,其页面样式在移动端有兼容问题。移动端有对应的代码包,以后有时间再整理。

相关推荐
努力的lpp7 小时前
渗透主流工具完整参数手册(sqlmap、Nmap、Hydra、Dirsearch、Xray)
javascript·网络协议·测试工具·安全·http·工具
problc7 小时前
用 JavaScript 打开中国的版式文档:@sharp9/ofdjs 诞生记
开发语言·javascript·ecmascript
超哥--14 小时前
B站视频内容智能分析系统(九):React 前端与管理面板
前端·react.js·前端框架
Cutecat_17 小时前
视频字幕处理工具横向:提取模式 vs 编辑模式,该如何选择
android·前端·ios·语音识别
dsyyyyy110117 小时前
JavaScript变量
开发语言·javascript·ecmascript
qq_4221525717 小时前
PDF 加水印工具怎么选?2026 年文档版权保护方案对比
前端·pdf·github
kyriewen17 小时前
手写 Promise.all、race、any:不到 30 行代码,解决并发异步的所有姿势
前端·javascript·面试
brucelee18618 小时前
OpenClaw 浏览器控制(Chrome MCP)完整教程
前端·chrome
ct97818 小时前
React 状态管理方案深度对比
开发语言·前端·react
胡志辉的博客19 小时前
深入浅出理解浏览器事件循环:从一道输出题讲到 Chrome 源码
前端·javascript·chrome·chromium·event loop