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 下载
- 一些修改
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 格式
url 编码方法(js 端，或者直接使用代码)：
encodeURIComponent(ossurl) - 参考效果
说明
以上是一个比较简单的实践，我们可以不用写代码，直接基于openresty 的灵活的能力，实现一个高效稳定的pdf 文件预览方案，对于其他需要预览ppt以及word的我们可以基于一些转换工具，同时集成openresty 的shell 操作能力也可以快速高效的搞定
