Nginx配置PDF.js实现手机浏览PDF不下载

原理：JS 在前端 Canvas 渲染 PDF，绕开浏览器原生 PDF 插件、微信 X5 内核强制下载的坑；iPhone Safari、安卓浏览器、微信内置浏览器都可以预览，不会触发下载。

1、下载兼容版包（微信低内核优先推荐 v2.4.456，很多实测微信不空白）

# 创建并进入目录
mkdir -p /data/pdfjs && cd /data/pdfjs
# 下载（legacy版本，兼容老旧安卓、微信X5）
wget https://github.com/mozilla/pdf.js/releases/download/v2.4.456/pdfjs-2.4.456-dist.zip
unzip pdfjs-2.4.456-dist.zip
#解压后里面核心：`build/`、`web/`，入口文件：`web/viewer.html`

访问规则：viewer.html 和 PDF 必须同域名，否则会报跨域 file origin does not match viewer's，我们下面 Nginx 同域部署，完美避开这个问题

2、Nginx 完整配置（直接放进你的 server {}）

# 存放pdfjs静态资源
location /pdfjs/ {
    root /data;
    # 静态缓存，提升速度
    expires 7d;
}

# 你的pdf文件目录,我的pdf文件放在/data/pdf/目录中
location /pdf/ {
    root /data;      
}

# 【预览入口】访问这个地址预览，不会下载！
# 格式：域名/pdfjs/web/viewer.html?file=/pdf/xxx.pdf
nginx -t && nginx -s reload

3、访问方式（重点！）

假设你的域名是 pdf.test.com，pdf 名字 demo.pdf，✅ 预览地址（微信 / 安卓直接打开，在线预览）

https://pdf.test.com/pdfjs/web/viewer.html?file=/pdf/demo.pdf
#`file=` 后面是**同域名绝对 URI**，不要写完整 https 跨域地址！

4、可选优化：隐藏顶部下载按钮（很多场景需要，防止用户手动下载）

编辑 /data/pdfjs/web/viewer.html，直接 CSS 隐藏，在 viewer.html 的 head 追加：

<style>
  #download, #secondaryDownload, #print {
      display: none !important;
  }
</style>

配置好了后通过手机浏览器或者微信或者电脑浏览PDF都不会再提示下载，下载按钮也隐藏了

相关文章