h5实现文件预览 （兼容ios 、android）

ios :

通过 window.open 即可实现，但是在 android 上是下载 ，而不是预览。

android:

部分文件可通过 open 预览，其他的单独做处理

其实window.open能实现大部分文件格式的预览、在android上，word、excel、pdf、（其他的没有试）不能实现预览，可以借助插件单独实现。

html结构：

<div onClick={this.toPreview} className={"online_look_view"}>
    在线预览
</div>

js代码：

  toPreview = () => {
    //filetype 文件类型；  fileurl 文件地址；  filename 文件名称（页面上显示用）；
    const { filetype, fileurl, filename } = this.props.location.state
    let ua = navigator.userAgent.toLowerCase()

    //在android中 ：open是下载 而不是预览 
    //当预览pdf和word的时候 借助插件
    if (
      filename.split(".")[1] == "pdf" &&
      (ua.indexOf("android") > -1 || ua.indexOf("adr") > -1)
    ) {
      this.props.history.push({
        pathname: "pdf",
        state: {
          url: api.fileUrl + fileurl,
          type: "pdf",
        },
      })
      return
    }

    if (filename.split(".")[1] == "docx") {
      this.props.history.push({
        pathname: "pdf",
        state: {
          url: api.fileUrl + fileurl,
          type: "docx",
        },
      })
      return
    }

    //ios中 window.open实现预览
    window.open(api.fileUrl + fileurl)
  }

pdf页面：

html结构：

        //这个插件预览支持的格式有图片，pdf，word,excel，txt,
        //视频的话直接用a标签就可以预览
        //如果只预览pdf的话，可以通过插件pdfh5实现
        <FileViewer
            fileType={this.props.location.state.type}
          filePath={this.props.location.state.url}
          onError={this.onError}
        />

js代码：

.1 先安装包 

yarn add  "react-file-viewer"

.2 导入

import FileViewer from "react-file-viewer"

.3 如果没有出现，那么记得把页面样式写写，宽高都设置为100%.