H5 NFC文档 h5 office

转载

lemon 2024-04-11 10:53:57

文章标签 H5 NFC文档 javascript uni-app vue.js html 文章分类 物联网

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

H5office

很简单的用法。

<!-- 创建一个标签就可以了 -->
<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。