记录一下使用PDFJS遇到的坑
创始人
2024-09-26 18:59:24
0

一、PDF.js 介绍

官方地址

中国文档

PDF.js 是一个使用 HTML5 构建的便携式文档格式查看器。 pdf.js 是社区驱动的,并由 Mozilla 支持。我们的目标是为解析和呈现 PDF 创建一个通用的、基于 Web 标准的平台。

 PDF.js 支持的功能:

  • 在线检索文档中的内容,并支持高亮显示,匹配大小写,统计匹配项等;

  • 指定页跳转,上下一页;

  • 下载或连接打印机打印当前预览文件;

  • 按比例缩放当前预览的文件,调整阅读视野;

  • 对当前预览的文件,开启在线演示模式;

  • 支持阅读本地pdf文件;

  • 支持大文件分片上传;

  • 支持在 viewer.html 添加水印;

  • 可在 viewer.html 中自定义样式;

二、安装

1.下载PDF.js

下载地址

下载后得到一个 .zip 的压缩包

备注:旧浏览器版本,不支持uos自带浏览器、微信浏览器等更旧版本。

2.解压到项目中

我用的是 vue3,把它解压到了 public 文件夹内;(我这里用的是【3.11.174】版本,并且把文件名成了fileView,没需求的可以不用改)

如果是早期版本的vue-cli脚手架放到 static 文件夹下。如果放在 src 文件下,可能不利于引入 viewer.html 进行预览。

3.允许跨域

在 web/viewer.mjs 或者 web/viewer.js 中搜索 file origin does not match viewer's 并注释掉。

不然可能会报跨域的错误

三、基本使用

方案一:通过弹窗预览

1.创建组件 PDF.vue
     
2.使用组件

列如我们需要预览 public 下的一个 test.pdf 文件; 或者换成其他网络路径。

方案二:直接访问,通过浏览器预览

   

四、问题与解决方案

Q:如果出现以下问题:

viewer.mjs:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.


pdf.mjs:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.

 说明无法解析.mjs 文件格式

A:解决方法:
方案一:把mjs 的后缀改成js 或者在 .htaccess 添加 
   AddType application//javascript js mjs 
方案二:配置 MIME 
1)Nginx

由于nginx无法识别mjs文件,从而在http header中错误的使用 Content-Type:application/octet-stream 来传输mjs文件,导致浏览器端认为它不是一个合法的js脚本。

操作如下:找到 Nginx 文件夹下的 mime.types ,我的mimetype文件路径为  /usr/local/nginx/mime.types

sudo vim /usr/local/nginx/mime.types

application/javascript                 js;

改为

application/javascript                 js mjs;

然后

sudo nginx -s reload

就可以了。

如果有可视化工具,也可以鼠标右键通过记事本编辑

 

如果有用到 ftl 模版、 gzip 文件或者其他格式,可以按照上面的方法添加,列如:

application/x-freemarker                 ftl;  application/x-gzip                       gz;
2)window

Windows部署到IIS需要设置MIME类型(没用到IIS可以忽略)

.mjs  application/javascript
.ftl     application/x-freemarker

方案三:切换版本

PDFjs所有历史版本

不用mjs的版本就好了,切换到 3.11.174 及以下的版本都可以。

Q:怎么禁用打印下载等功能
A:禁用下载、打印等功能:

不能直接注释会报错,一般建议采用css方式隐藏。例如注释下载功能:打开web/viewer.html文件,搜索关键字“download”,在相关代码段加上style="visibility: hidden;"即可

相关内容

热门资讯

透明挂教程!传奇扑克辅助(微扑... 透明挂教程!传奇扑克辅助(微扑克wpk透视辅助)原来真的有挂(有挂秘籍)1、每一步都需要思考,不同水...
透视内幕!云扑克有没有辅助挂,... 透视内幕!云扑克有没有辅助挂,线上德州ai机器人(其实真的有挂)是一款可以让一直输的玩家,快速成为一...
七分钟辅助挂!轰趴大菠萝十三水... 您好,轰趴大菠萝十三水有外挂吗这款游戏可以开挂的,确实是有挂的,需要了解加微【136704302】很...
2024新版教程!微扑克插件(... 2024新版教程!微扑克插件(微扑克ai辅助器苹果版)其实真的是有挂(有挂插件)是一款可以让一直输的...
7分钟辅助!德扑线上创建房间&... 7分钟辅助!德扑线上创建房间"德州免费辅助神器app(其实真的有挂)-哔哩哔哩1、德州免费辅助神器a...
透视揭秘!德州之星ai辅助,德... 透视揭秘!德州之星ai辅助,德州软件辅助(原来真的有挂);科技详细教程小薇《487309276》所有...
透明挂教程!用ai挂打德州有用... 透明挂教程!用ai挂打德州有用吗(wepoke真的有挂)原来真的有挂(有挂插件)1、实时用ai挂打德...
4分钟总结!微扑克辅助钻石&q... 1、4分钟总结!微扑克辅助钻石"wepokeai代打(其实真的有挂)-哔哩哔哩。2、微扑克辅助钻石透...
爆料教程!聚星扑克有假吗(智星... 爆料教程!聚星扑克有假吗(智星德州菠萝开挂)原来真的是有挂(有挂教程)1、实时智星德州菠萝开挂开挂更...
1分钟辅助挂!微扑克wpk安全... 1分钟辅助挂!微扑克wpk安全吗"德州免费辅助神器app(原来真的有挂)-哔哩哔哩1、在德州免费辅助...