PC项目里面使用pdf.js在线预览pdf文件功能

时间 2019-12-12

标签项目里面使用 pdf.js pdf 在线预览文件功能栏目 JavaScript 繁體版

原文原文链接

1.一天PM找到我，客户说了要实现一个在线预览pdf文件的功能！并且要不能下载
2.我：？？？，没作过啊，而后去搜索了一下，有一个pdf.js的开源项目
3.打开gitHub 找到该项目
gitHub地址：pdf.js
4.具体内容去看文档，因为项目是纯html开发
5.这里的直接用: https://pan.baidu.com/s/1GtEu... 提取码: x875html

6.解压后的文件

7.demogit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="generic/web/viewer.html?file=你的pdf文件地址 target="view_window">在线预览pdfdemo</a>
</body>
</html>

8.去掉下载和打印按钮
找到文件viewer.html如图
github

隐藏打印和下载按钮代码web

#print {
  visibility: hidden;
}
#download {
  visibility: hidden;
}

禁止鼠标右键弹出（此方案只是隐藏了右键弹框，若是想下载仍是能够下载的）

spa

<script>
        // 禁止鼠标右键保存打印
        document.oncontextmenu = function(ev){
            return false;
        };
    </script>

9.官方democode

10.完成！htm