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

ios :

通过 window.open 即可实现，但是在 android 上是下载 ，而不是预览。所以单独为 pdf 的预览做处理

其实 word 和 excel 也是下载，但是是在是懒得管了，直接当作不可预览文件好了。

android:

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

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

html结构：

    在线预览

js代码：

  toPreview = () => {
    const { fileurl, filename } = this.props.location.state
    let ua = navigator.userAgent.toLowerCase()
    if (
      filename.split(".")[1] == "pdf" &&
      (ua.indexOf("android") > -1 || ua.indexOf("adr") > -1)
    ) {
      this.props.history.push({
        pathname: "pdf",
        state: {
          url: api.fileUrl + fileurl,
        },
      })
      return
    }
    window.open(api.fileUrl + fileurl)
  }

html结构：

js代码：

.1 先安装包 

yarn add pdfh5

.2 导入

import Pdfh5 from "pdfh5"
import "pdfh5/css/pdfh5.css"

.3 接受所需的url

  componentDidMount() {
    this.pdfh5 = new Pdfh5("#demo", {
      pdfurl: this.props.location.state.url,
    })
  }

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