pdf.js 是日常使用比較多的一個web端pdf預覽方案，因為預設有一些安全策略（同源，但是也可以基於cors 解決）
所以為了簡單基於nginx 的代理整合pdf.js 這樣可以比較靈活的解決跨域以及靜態資源的問題，同時也集成了nginx的
cache 方便對於pdf檔案cache加速pdf 的顯示

環境準備

• docker-compose 檔案

version: "3"

services: 

 pdf-proxy: 

  image: openresty/openresty:alpine

  volumes:

  - ./nginx.conf:/usr/local/openresty/nginx/conf/nginx.conf
 

  - ./pdf:/opt/pdf

  - ./cache:/opt/nginx/data/cache

  ports: 

  - "80:80"

• nginx 配置

worker_processes 1;

user root; 

events {

  worker_connections 1024;

}

http {

  include    mime.types;

  default_type application/octet-stream;

  sendfile    on;

  keepalive_timeout 65;
 

  lua_need_request_body on;

  gzip on;

  # 配置cache

  proxy_cache_path /opt/nginx/data/cache keys_zone=pdf:300m;

  resolver 114.114.114.114 ipv6=off;     

  real_ip_header   X-Forwarded-For;

  real_ip_recursive on;  

  server {

    listen    80;

    server_name localhost;

    charset utf-8;
 

    default_type text/html;

    location /doc {

      root /opt/pdf;

     }

    location /pdf {

      proxy_redirect   off; 

      # 開啟了跨域訪問，實際可以不用

      add_header Access-Control-Allow-Origin *;

      add_header Access-Control-Allow-Methods GET, POST, PUT, DELETE, OPTIONS;

      proxy_set_header Host $http_host;

      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for; 

      client_body_buffer_size 10M;

      client_max_body_size 10G;

      set $agent "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5";

      set_by_lua_block $oss_url { 

        local ossurl= ngx.req.get_uri_args()["ossurl"];

        ngx.log(ngx.ERR, "error: ", ossurl)

        return ossurl

       }

      proxy_buffers 1024 4k;

      proxy_read_timeout 300;

      proxy_connect_timeout 80;

      proxy_set_header User-Agent $agent;

      proxy_pass $oss_url;

      # 配置cache

      proxy_cache pdf;

      proxy_cache_key $scheme$proxy_host$uri$is_args$args;

      proxy_cache_valid 200 304 302 24h;  

     }

    error_page  500 502 503 504 /50x.html;

    location = /50x.html {

      root  html;

     }  

   }  

}

• pdf.js 下載
  參考連結
  http://mozilla.github.io/pdf.js/getting_started/#download
• 一些修改
  url 模式檔案啟用
  viewer.js 檔案

 if (origin !== viewerOrigin && protocol !== "blob:") {

     throw new Error("file origin does not match viewer's");

    }

禁用上傳預覽

function webViewerInitialized() {

 appConfig.toolbar.openFile.setAttribute("hidden", "true");

添加簽章支援
pdf.worker.js

if (data.fieldType === "Sig") {

   data.fieldValue = null;

​

   //_this3.setFlags(_util.AnnotationFlag.HIDDEN);

   }

使用說明

• 請求格式說明
  因為需要獲取url引數 ，所以我們查詢字串的引數是需要進行url編碼的
  pdf 檔案proxy 格式
  http://localhost/pdf?ossurl=<thirdpart-pdf-url-with-url-encode>
  url 編碼方法(js 端，或者直接使用程式碼)：
  encodeURIComponent(ossurl)
  pdf 預覽請求地址
  http://localhost/doc/web/viewer.html?file=<origin-nginx-proxy-url-with-url-encode>
• 參考效果

說明

以上是一個比較簡單的實踐，我們可以不用寫程式碼，直接基於openresty 的靈活的能力，實現一個高效穩定的pdf 檔案預覽方案，對於其他
需要預覽ppt以及word的我們可以基於一些轉換工具，同時整合openresty 的shell 操作能力也可以快速高效的搞定

參考資料

http://mozilla.github.io/pdf.js/getting_started/#download
https://github.com/rongfengliang/openresty-pdf-view