Hellom's Studio.

前端实现在线预览pdf、Excel、word文件

pdf.js
字数统计: 1.1k阅读时长: 4 min
2020/03/02 Share

需求是 在web端实现在线预览

只能预览 不能下载 右键保存等操作

本实现基于 angular 框架开发的

实现的方法：

方法一：通过 a 链接 href 的形式

1
<a href="文档地址"></a>

ps:

<a>链接方式会打开一个新的页面

如果需要在当前页面预览 则不满足实际需求

方法二：通过iframe标签内嵌的形式

1
<iframe style="width: 100%;height: 1080px;margin-top: 62px;" [src]="file" frameborder="0" ></iframe>
1
this.file = this.sanitizer.bypassSecurityTrustResourceUrl(`${this.data.file}#toolbar=0`);

ps:

  • angular 中访问文件 需要是安全 可被信任的地址 才可访问 所以提供了 DomSanitizer 服务 需要调用此方法

  • #toolbar=0: 隐藏默认头部的功能条 以防止用户点击下载

  • 此方法右键可另存为 尝试过以下方法均无效

    • 禁止右键菜单事件 只能禁止父页面的右键行为 子页面 iframe 则无效

    • 在预览的pdf上罩一个透明的层 解决了右键的问题 但带来了滚动条无法滚动的问题

    • 在遮罩透明的层的基础上 使用css3的 pointer-events:none属性 可无视遮罩层 鼠标不在监听当前层 而监听下层的事件 滚动解决了 但右键的问题又回来了…

方法三：通过标签的形式

1
2
3
4
5
<!-- 1. <object> -->
<object src="文档地址" width="100%" height="100%"></object>

<!-- 2. <embed> -->
<embed src="文档地址" type="application/pdf" width="100%" height="100%">

ps:

  • <object>: 使用方法和 iframe 区别不是很大 所以也不满足需求

  • <embed>: 使用方法差不多 但不同的是 此标签是闭合的 如果浏览器不支持 pdf 嵌入 则这个标签内容什么内容都看不到

方法四：使用 pdf.js 库的形式

  • 首先 下载 pdf.js 库

  • 下载下来包含两个文件夹：build 和 web 放到项目中

  • 预览的文档地址是：项目本地的路径/pdf/web/viewer.html?file=文档地址 注意：?file=是必写的 不然就无法预览

在 html 中可用一下三种方式实现：

  • a标签：使用pdf.js展示pdf文件</>

  • window.open ：window.open(“项目本地的路径/pdf/web/viewer.html?file=文档地址”);

  • iframe ：<iframe src="项目本地的路径/pdf/web/viewer.html?file=文档地址" />

1
<iframe style="width: 100%;height: 1080px;margin-top: 62px;" [src]="file" frameborder="0" ></iframe>
1
2
let url = `/assets/data/pdf/web/viewer.html?file=${this.data.file}`;
this.file = this.sanitizer.bypassSecurityTrustResourceUrl(url);

以上方法都好了之后 在页面上看效果时 发现以下三个问题：

  • console 中报了 跨域的错误

解决如下：

找到项目包中的 viewer.js

注释掉以下代码

1
2
3
if (fileOrigin !== viewerOrigin) {
    // throw new Error('file origin does not match viewer\'s');
}

如果仍有跨域问题

则需要与后台配合下

在服务器 响应头添加

'Access-Control-Allow-Origin' '*'

'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'

Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'

Access-Control-Expose-Headers' 'Content-Length,Content-Range

如果还是不行

那就打包后 放到服务器

看正式版本的就可以了的

  • 右键还是可也另存为的

解决如下：

找到项目包中的 viewer.html

在 head标签里增加如下代码 即可

1
2
3
4
<script>
    // 禁止右键另存为设置
    document.oncontextmenu = new Function("return false");
  </script>
  • 功能条里面有下载的按钮

解决如下：

找到项目包中的 viewer.html

搜索到 id=”download” 的 button

添加 style="visibility:hidden" 样式 即可隐藏

1
2
3
4
<button style="visibility:hidden" id="download" class="toolbarButton download hiddenMediumView"
    title="Download" tabindex="34" data-l10n-id="download">
    <span data-l10n-id="download_label">Download</span>
</button>
  • ctrl + s 也是可以保存的

解决如下：

找到项目包中的 viewer.js

注释掉这两行即可禁用键盘事件

1
2
3
4
5
6
7
8
if (cmd === 1 || cmd === 8) {
   switch (evt.keyCode) {
     case 83:
       // PDFViewerApplication.download();
       // handled = true;
       break;
   }
 }

总结：

  • 如果文档随意可以下载的话 那建议使用 iframe 相对比较简单快速

  • 如果文档不可随意下载的话 那就只能使用 pdf.js 等其他第三方的库 来控制一些权限等

CATALOG
  1. 1. 方法一：通过 a 链接 href 的形式
  2. 2. 方法二：通过iframe标签内嵌的形式
  3. 3. 方法三：通过标签的形式
  4. 4. 方法四：使用 pdf.js 库的形式
  5. 5. 总结：
Total : 43
2020
2019
angular7 TypeScript ES6 css dart VsCode 面向对象 数据类型 flutter 布局 枚举 image_picker ionic3 极光推送 angular hexo blog ionic4 Express Node mongodb 企业微信 微信小程序 scroll-view scss chrome node 正则表达式 JavaScript vue pdf.js
angular7 TypeScript css TypeScript/ES6 dart flutter ionic3 angular ionic4 Express mongodb 企业微信 微信小程序 scss chrome node 正则表达式 JavaScript vue