摘要：
==“blob:”）｛thrownewError；｝禁用上载预览功能webViewerInitialized（）｛appConfig.toolbar.openFile.setAttribute；添加签名支持pdf.worker.jsif｛data.fieldValue=null；//_this3.setFlags；｝使用描述请求格式描述因为我们需要获取url参数，所以查询字符串的参数是需要进行url编码的pdf文件代理格式http://localhost/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 文件预览方案，对于其他
需要预览ppt以及word的我们可以基于一些转换工具，同时集成openresty 的shell 操作能力也可以快速高效的搞定
参考资料
http://mozilla.github.io/pdf.js/getting_started/#download
https://github.com/rongfengliang/openresty-pdf-view