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

弃之

已于 2022-09-14 23:56:34 修改

阅读量1.1w

点赞数

分类专栏：前端文章标签： android webview javascript

于 2022-02-28 13:54:32 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44643019/article/details/123180624

版权

该博客探讨了如何在H5中实现文件预览功能，特别关注iOS和Android的兼容性问题。在iOS上，`window.open`即可实现预览，但在Android上需要特殊处理。对于Android，部分文件类型可以通过`window.open`预览，其余如Word、Excel、PDF等需借助插件。博客还提供了HTML结构和JavaScript代码示例，以及PDF页面预览的步骤，包括安装包、导入和页面样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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: "p