PDF.js插件使用(含部署到windows、nginx的注意事项)

yuyu3007 332 0

1.下载:

https://mozilla.github.io/pdf.js/getting_started/

 2.解压:

建立一个自定义名称,如pdfjs的文件夹再放

 3.预览:

http://localhost:8080/web/viewer.html?file=test.pdf

我用的是window.open,url是文件地址,例如:url= 'https://xxx.com/xxx.pdf'

  window.open(

            'web/viewer.html?file=' +

              encodeURIComponent(url)

          )

 

也可以使用iframe:

<iframe src="/web/viewer.html?file=test.pdf"></iframe>

4.跨域:

打开web->viewer.mjs(或viewer.js)文件,搜索"file origin does not match viewer's”找到下面代码所在的位置,然后注释掉就可以实现跨域访问了

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

5.部署:

1). Windows部署

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

.mjs  application/javascript

.ftl     application/x-freemarker


2). Linux部署

nginx在你的mime.types文件(不同版本位置可能不同)中设置MIMI类型(添加第二张图圈起来的部分)

添加圈起来的部分

 

6.其他

1). 官方效果预览:https://mozilla.github.io/pdf.js/web/viewer.html

2). PDF.js中文文档:https://gitcode.gitcode.host/docs-cn/pdf.js-docs-cn/index.html


标签: #微信 #预览 #PDF