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

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

一，免费方式

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

<el-button type="test" @click="wordDetail">点击查看简历详情</el-button>
... ...
  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 vue-demi@0.13.11

#excel文档预览组件
npm install @vue-office/excel vue-demi@0.13.11

#pdf文档预览组件
npm install @vue-office/pdf vue-demi@0.13.11

如果是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
收费较低，展示效果比较好，集成简单，缺点是除预览外不能编辑，后续需求变更的话就要换掉了。