js前端预览office文档和PDF文档。控制下载权限与拷贝权限解决方案。

最近在开发项目遇到一个office文档和PDF文档预览的需求，并且需要控制用户是否可以下载文件和拷贝文档中的文字。

H5office

h5office 官网文档地址，需要进去申请自己的appid。免费的

查看最终实现的效果

很简单的用法。

<!-- 创建一个标签就可以了 -->
<div id="office"></div>

<button id="open">打开文档</button>
<!-- 引用 h5office 库 -->
<script src="https://h5plugin.mumudev.top/public/h5office/h5office_min.js"></script>

<script>
  const office = document.getElementById("office")
    // e80bac62d500a7b4765cc484b686efeefa7cdab6appId  是我申请的appid，你们使用的话需要在 h5office 官网中，看文档申请自己的 appid
  const h5office = new H5office(office, "e80bac62d500a7b4765cc484b686efeefa7cdab6appId")

  // 修改权限 copy 是拷贝权限、download  下载权限、print 打印权限
  // 如果不想用户可以下载的话就不传递 download 就可以了
  h5office.setPrivilege(['copy', 'download', 'print'])

 // 监听关闭，监听后必须返回 true 否则无法关闭
  h5office.onClose((e) => {
    alert("确认是否同意当前文档所说")
    // 这里返回 false 可以取消关闭的操作
    return true
  })

 // 监听下载按钮。如果传递了 download 权限，就需要监听下载按钮，当用户点击下载按钮我们就在这个事件中下载文件
  h5office.onDownload((e) => {
    // e 是当前预览的文件名
    alert('下载按钮' + e)
  })

// 初始化开始,如果预览文件比较大，读取比较慢的话我们可以在这个事件中打开logind的效果
  h5office.onInit((e) => {
    // 返回文件名和主题色
    console.log("初始化开始", e)
  })

    // 设置需要预览的文件地址，也可以直接传递一个本地的文件对象预览本地文件
   h5office.setFiel('https://h5plugin.mumudev.top/public/previewOffce/444_big.xlsx')

// 打开预览文档
  document.getElementById("open").addEventListener("click", function () {
    // 调用 h5office 的 show 方法
    h5office.show()
  })
</script>

电脑端打开样式很漂亮基本和使用微软的office软件打开一直。手机端也有单独的ui界面，并且支持双指放大缩小等操作。功能很强大，在官方文档中还说支持uniapp打包成安卓app和苹果app。

缺点：

1. 有次数限制，免费的是300次，可以在h5office官方网站小程序中进行刷新，刷新的次数是没限制的，因此只要勤快一点是可以一直免费使用的。

解决办法：
小程序中是设置使用次数快没有的时候进行邮件提示，不用一直关注使用次数，当有邮件提示的时候，进入小程序中刷新一下就可以了
或者支持十元成为赞助者，赞助者每次刷新会有1000的使用次数。

2. 对预览文件有大小限制，免费版本是10M，赞助版本是20M。如果文件很大的话只有进行私有化部署了

h5office 官网