openresty+pdf.js 实现一个通用的pdf预览服务

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.js 实现一个通用的pdf预览服务_分享

 

 

说明

以上是一个比较简单的实践，我们可以不用写代码，直接基于openresty 的灵活的能力，实现一个高效稳定的pdf 文件预览方案，对于其他
需要预览ppt以及word的我们可以基于一些转换工具，同时集成openresty 的shell 操作能力也可以快速高效的搞定

参考资料

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