我希望可以在网页中使用iframe用预览pdf文件,于是我打算使用pdf.js,在使用的过程中也遇到了一些坑,于是在这里记录下来。

下载

https://github.com/mozilla/pdf.js/releases下载最新的代码,解压。

修改源码

web目录下,找到viewer.html,打开,在<head>标签下,添加如下代码:

1
<meta name="referrer" content="same-origin">

web目录下,找到viewer.mjs,打开,找到HOSTED_VIEWER_ORIGINS变量,根据你的网址修改它的值。为了确保当前页面是你的服务器,建议只修改HOSTED_VIEWER_ORIGINS的值,而不是像网上的某些做法一样去除同源检查。

1
const HOSTED_VIEWER_ORIGINS = ["null", "https://www.yanceymc.cn", "https://yancey2023.github.io"];

使用

这里举个例子来进行说明。比如我想预览https://www.yanceymc.cn/pdf/test.pdf,我只需要使用iframe内嵌这个网址:https://www.yanceymc.cn/pdf.js/web/viewer.html?file=https://www.yanceymc.cn/pdf/test.pdf