IkPreviewFile(iking-web-ui>=v1.0.14)

kkFileView 实现，修改了前端展示样式

支持 word excel ppt，pdf 等办公文档

支持 txt,java,php,py,md,js,css 等所有纯文本

支持 zip,rar,jar,tar,gzip 等压缩包

支持 jpg，jpeg，png，gif 等图片预览（翻转，缩放，镜像）

支持 mp3，mp4，flv 等多媒体文件预览

需要服务端启动 docker 服务, 安装部署非常方便

1. docker pull keking/kkfileview:4.1.0
2. docker run -it -p 8012:8012 keking/kkfileview:4.1.0

用于文件预览

Props

参数	说明	类型	默认值
v-model	是否显示	Boolean	false
url	文件地址	String	''
loadUrl	文件加载地址(如果 url 中已经是 http 开头的，则不需要传递 loadUrl)	String	''
field	文件的字段映射	Object	{}
iconSize	图标大小	Number	40
showBg	是否显示背景色	Boolean	true
width	组件宽度	Number/String	100%
iconHoverShow	图标 hover 时才显示	Boolean	false
isOnlyOfficePreview	是否需要 onlyoffice 预览	Boolean	true
onlyOfficeAccept	需要 onlyoffice 预览的文件类型	String	.pdf,.docx,.doc.ppt,.pptx,.xlsx,.xls
onlyofficeServer	onlyoffice 服务地址	String	''
onlyOfficeConfig	onlyoffice 公共配置	Object	{}
jwtToken	onlyOffice 的加密 token	String	''
showType	预览的模式	String as PropType<'default' |'simple' | 'simple-icon'>	'default'
showDownloadBtn	是否显示下载按钮	Boolean	true
showPreviewBtn	是否显示预览按钮	Boolean	true

示例代码

普通文件(带后缀名http://xxx.jpg)

  <template>
    <!-- default模式 -->
    <IkPreviewFile :list="list" :icon-size="40" width="400px" />
    <!-- simple模式 -->
    <IkPreviewFile :list="list" :iconSize="22" isOnlyOfficePreview showType="simple" />
    <!-- simple-icon模式 -->
    <IkPreviewFile
      :list="list"
      :icon-size="22"
      width="400px"
      showType="simple-icon"
    />
  </template>

流文件(http://xxxxxx?fileUrl=id)

  <template>
    <!-- 示例 1 传loadUrl -->
    <IkPreviewFile
      v-model="visable"
      load-url="http://192.168.2.171/api/server/oss/download?fileUrl="
      url="73ee4fe018f34b63b702862b8537f30a"
      kk-url="http://192.168.2.144:8012/onlinePreview?url="
      file-name="人员.png"
    />

  <!-- 示例 2 不传loadUrl -->
     <IkPreviewFile
      v-model="visable"
      url="http://192.168.2.171/api/server/oss/download?fileUrl=73ee4fe018f34b63b702862b8537f30a"
      kk-url="http://192.168.2.144:8012/onlinePreview?url="
      file-name="人员.png"
    />
  </template>