vue中Word文件Excel文件PDF文件PPT文件的预览

vue中Word文件Excel文件PDF文件PPT文件的预览

一,免费方式

方式1:
上传文件到服务器,然后由后端每页文件装换成图片,返回给前端展示。优点:排版适配随前端发挥,呈现效果较好。缺点:文件大内容多的时候,转图片时间会很久,不利于客户上传后立即预览。
方式2:
新页面打开word、pdf等office文件,使用微软提供的免费服务。缺点:若是你的文件比较注重隐私,不能公开的话,这种方式,就不太适合了,否者的话,是比较方便的解决方案。这里需要你有一个自己的服务器,并且服务器要购买域名对应,要默认80端口哦,否则依旧是无法预览。优点:简单方便好实现效果。或者 自己公司搭建部署一套微软的office online server(免费)这个一般是后端同事去操作,前端调用的话,可以使用iframe,同上类似

点击查看简历详情
... ...
  methods: {
    wordDetail() {
      // 微软提供的方法
      window.open('https://view.officeapps.live.com/op/view.aspx?src=' + 文件地址)
    }
  }

方式3:
使用vue-office插件,亲测对vue2好用,显示Word文件和Excel文件Pdf文件的鲜果比较统一,不会类似单个集成差异性那么大。

#docx文档预览组件
npm install @vue-office/docx [email protected]

#excel文档预览组件
npm install @vue-office/excel [email protected]

#pdf文档预览组件
npm install @vue-office/pdf [email protected]

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api/

链接: vue-office详情链接
方式4:
单个集成,vue3亲测成功的有:“docx-preview”: “^0.1.11”,“luckyexcel”: “^1.0.1”,“vue-pdf-embed”: “^1.1.4”,“vue3-pdfjs”: “^0.1.6”,vue2亲测成功的有:“docx-preview”: “^0.1.18”,“luckyexcel”: “^1.0.1”,“xlsx”: “^0.18.5”,“vue-pdf-embed”: “^1.1.6”,“vue-ppt”: “^1.0.0”。但效果不统一,改为使用方式3。

二,收费组件

收费的office类组件较多,效果也十分强大。
推荐:https://officeweb365.com/Default/Viewview
收费较低,展示效果比较好,集成简单,缺点是除预览外不能编辑,后续需求变更的话就要换掉了。

你可能感兴趣的:(vue.js,word,excel)