移动端查看附件的几种方式

移动端查看附件的几种方式

html标签实现方式

（1）a标签的实现方式

<!--1.文件附件通过a标签的方式-->
<a :href="fileUrl">文件名称</a>

js类似的实现方式有：

window.location.href(url)
window.open(url, '_self')

优点：代码简单，适用于h5集成在支持下载查看的app，适用于文件下载链接。如果是html链接则可直接实现预览。
不足：下载链接，仅适用于支持下载的app，否则安卓无法查看附件，要下载文件后才可查看容易占用客户手机内存，如果使用html链接则需要后端将文件转为html，此功能需要购买插件后端进行转化对后端要求较高。对于返回事件不好控制，在不同的app中可能要写不同的方式返回。

（2） iframe标签

在页面中配合弹窗组件的使用可以达到控制查看页面出现与消失，以及与其他页面统一跳页的视觉效果，以vux的popup组件为例（代码中的HView，HHeader，HContent为使用自己的组件，大家可以不加自己写页面样式）
html代码部分：

<!--点击查看附件-->
<div class="attachment" @click="tickertQueryAttachment"></div>
<div v-transfer-dom>
          <popup v-model="showFile" height="100%" :popup-style="{'z-index': '502'}">
            <HView class="popup1 navs">
              <HHeader class="header">
                <div slot="left" class="hips-header-btn" @click="showFile=false">
                  <i class="allow-left-icon" />
                </div>
                <div slot="center" class="title">文件名称</div>
              </HHeader>
              <HContent class="content">
              <!--1.我来解释一下这里为啥不用他的src属性，这里使用的话当打开第二个文件的时候点击手机的物理返回键就会返回到上一个文件的内容去
              2.这里使用ref不使用id的原因是我发现有时候会莫名其妙的找不到这个id，可能与vue虚拟dom有关，为了保险起见就使用了ref
              -->
                <iframe
                  name="fileView"
                  frameborder="0"
                  style="height:100%;width:100%;border:0"
                />
              </HContent>
            </HView>
          </popup>
        </div>

触发弹窗弹起并预览文件以及返回的js代码：

  tickertQueryAttachment (url) {
      this.showFile = true
      this.$refs.attachmentFileRef.contentWindow.location.replace(url)
    },
    //在使用物理返回键返回时判断是否当前弹窗弹起（要控制物理返回键参考往期文章）
    goBack () {
      if (this.showFile) {
        this.showFile = false//关闭弹窗
      } else {
        //正常的跳转逻辑
      }
    },

优点：用户体验良好，能够适用于各种app，能够有效控制返回事件。
不足：下载链接，仅适用于支持下载的app，否则安卓无法查看附件，要下载文件后才可查看容易占用客户手机内存，如果使用html链接则需要后端将文件转为html，在此情况下安卓和ios都可预览，此功能需要购买插件后端进行转化对后端要求较高

利用各种插件实现方式

（1）vue-pdf插件预览

首先在项目中下载yarn add vue-pdf
html

<pdf
     v-for="i in numPages"
     :key="i"
     :src="fileUrl"
     :page="i"
     @page-loaded="pageLoaded($event)"
     style="display: inline-block; width: 100%;z-index:506;"
     />

js

import pdf from 'vue-pdf'
export default {
  components: {
    pdf,
  },
    data () {
    return {
      fileUrl: '',//文件下载链接
      numPages: undefined,//无需赋值
    }
  },
  methods: {
    //页数加载
   pageLoaded (e) {
      console.log('加载e------', e)
    },
  }
}

优点：可以配合弹窗组件一起使用，能达到很好关闭开启效果。支持附件在线预览，无需下载，能够适用于各种类型的app。
缺点：后端必须返回文件流的链接形式，并且前端只适用于vue框架，且只支持pdf文件，需要后端进行转化。不支持放大缩小，需要前端代码去控制，体验较差。

（2）pdf.js

第一种方式：使用viewer.html,以读取文件流方式在线展示pdf文件
下载pdf.js:官网下载地址
下载后将pdf文件包 放到服务器上或者放在static文件夹下在html中

   <!--fileUrl=`服务器上或static文件夹里的viewer.html的路径?file=${encodeURIComponent(文件下载链接)}`-->
       <iframe
         name="fileView"
         frameborder="0"
         :src="fileUrl"
         style="height:100%;width:100%;border:0"
       />

优点：可以实现文件预览，预览中还能进行文件的缩放且效果良好，能够分页加载以及支持全文当搜索关键词方便客户查看，推荐将文件包放在服务器上，能够减小前端包的大小，提升加载速度。能够适用于各种前端框架，能够兼容移动以及pc。
缺点：只适用于pdf文件，需要后端做处理转化。

（3）kkFileView

首先需要后端部署部署步骤详见官网

var url = ''; //要预览文件的访问地址
window.open('后端服务器容器地址/onlinePreview?url='+encodeURIComponent(url));

其他文件形式参见官网文档
优点：可以实现文件预览，预览中还能进行文件的缩放且效果良好，能够分页加载以及支持全文当搜索关键词方便客户查看。能够适用于各种前端框架，能够兼容移动以及pc。以及下图的优点。

缺点：需要后端部署镜像。