前言

本文列举了永中DCS文档在线预览的用Vue的简单调用说明，您需要详细文档可以咨询在线客服。

实现效果及实现原理

    实现原理：通过操作iframe内部window对象影响内容，将这些接口封装注册在Vue.prototype上。

注册接口

    ①    在项目中新建server目录，创建api.js,此文件用来引用接口（可以是其他类型的接口，统一注册到api里面）

    ②    在server目录下新建文件render，然后引入永中接口插件yozo.js。

    ③    在main.js将接口挂载在Vue.prototype上。

    ④    调用永中文档转换接口，返回预览地址。

https://fcsapi.yozodocs.com/composite/upload

    传入对应文件，将返回的预览地址用iframe引入，运用yozo.js里面的方法操作iframe中预览文件即可。

    以el-upload组件为例：

使用方法

    ①    实例化对象

this.dcsRender = new this.$api.DcsRender("iframeId", "type");

需依次传入两个参数：

• iframeId（string）：iframe元素的id

• type（string）：预览文件的类型。可选参数（"word","ppt","excel"）     ②    调用方法即可。

      // 调用方法即可
      this.dcsRender.lastPage()
      this.dcsRender.nextPage()

API

通用API

接口名	作用	传参	返回值
lastPage	上一页	null	null
nextPage	下一页	null	null
gotoPage	跳转指定页	number	null
getCurrentPage	返回当前页码	null	promise
magnify	放大	null	null
shrink	缩小	null	null

PPT特有API

接口名	作用	传参	返回值
preAnimation	上一动画	null	null
nextAnimation	上一动画	null	null
gotoAnimation	跳转指定动画	object1	null
getAnimationInfo	返回当前动画信息	null	promise
play	全屏	null	此行为已经被浏览器禁用，只能手动触发

注释

object1

{
    'pageIndex':number,
    'animationId':number,
    'type':'next'/'pre'
}

总结

    永中文档转换接口是测试接口，限制100M以下的文档可以转换。转换文档类型是可以是word，ppt，excel，txt，pdf等格式，但是对于操作预览内容的接口仅限于word，ppt，excel三种格式。

转载自：www.yozodcs.com/page/help-v… vue项目pdf文件预览_永中DCS预览vue接口调用