PDF.js超简单使⽤教程，⼀看就会！pdfjs 可以在线预览pdf⽂件，提供丝滑流畅的预览效果，⽀持缩放、页数控制、⽂档内检索等强⼤功能。
1 下载
去Prebuilt版本
下载后解压，⽂件结构为：
2 启动项⽬
项⽬在本地环境（url以file://开头）⽆法运⾏，需要服务器环境。
使⽤nginx，修改配置⽂件 nginx安装⽬录/f
server {
listen 8888;
location / {
root D:/pdfjs-2.2.228-dist;
}
}
3 预览指定的pdf⽂件
默认加载的⽂件是：
想要加载别的⽂件，应该怎么做呢？
在 web/viewer.js ⽂件中到 webViewerInitialized ⽅法：
以上代码说明：如果地址栏参数中有file字段，就使⽤file字段的地址；如果没有，就⽤ defaultUrl
3.1 预览pdfjs服务器内部的⽂件
先试试简单的：把⽂件放到pdfjs服务器的内部，看看能否预览：
把⽂件放到 web ⽬录下：
添加地址栏参数 file=能看吗.pdf后访问，预览成功！
3.2 预览其他服务器中的⽂件
在真实的场景中，要预览的⽂件不会在pdfjs服务器的内部，⼀般都在另外⼀个业务服务器中。
// 另外⼀个业务服务器(10.10.10.100)的⽂件接⼝（返回⽂件流）
var anotherServerPreviewUrl ="10.10.10.100/doc/preview?fileId=11111";
// 拼到file参数中，需要 encodeURIComponent 转译
const`localhost:8888/web/viewer.html?file=${encodeURIComponent(anotherServerPreviewUrl )
javascript说明}`;
注意要⽤ encodeURIComponent 转译：
encodeURIComponent() 函数 与 encodeURI() 函数的区别之处，前者假定它的参数是 URI 的⼀部分（⽐如协议、主机名、路径或查询字符串）。因此 encodeURIComponent() 函数将转义⽤于分隔 URI 各个部分的标点符号。
pdfjs服务器会请求 anotherServerPreviewUrl 获取⽂件流。
这个请求是 跨域 的，所以要 nginx 代理
代码改为：
// /api/代理到
var anotherServerPreviewUrl ="/api/doc/preview?fileId=11111";
const`localhost:8888/web/viewer.html?file=${encodeURIComponent(anotherServerPreviewUrl )}`；在 nginx 配置中中添加对 /api/ 的代理，：
server {
listen 8888;
location / {
root D:/pdfjs-2.2.228-dist;
}
location /api/ {
proxy_pass 10.10.10.100/;
}
}
预览成功：
4 页⾯改样式
在 web/viewer.html 中，样式可以随便修改，⽐如把操作栏移动到下⾯，改成粉⾊：
需要注意的是：
元素的class可以改，都是控制样式的，和功能⽆关。
元素的id和功能相关，不要改也不要删。
想要隐藏某个功能的时候，不能直接从页⾯删除元素，⽽是要隐藏（display:none）。
因为：pdfjs 在进⾏初始化（绑定事件）的时候，是根据 id 来元素的。如果不到DOM元素，就会报错：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论