移动端查看附件的⼏种⽅式
移动端查看附件的⼏种⽅式
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->
<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"
/>
</HContent>
安卓下载</HView>
</popup>
</div>
触发弹窗弹起并预览⽂件以及返回的js代码：
tickertQueryAttachment(url){
this.showFile =true
this.$place(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)"
/>
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"
/>
优点：可以实现⽂件预览，预览中还能进⾏⽂件的缩放且效果良好，能够分页加载以及⽀持全⽂当搜索关键词⽅便客户查看，推荐将⽂件包放在服务器上，能够减⼩前端包的⼤⼩，提升加载速度。能够适⽤于各种前端框架，能够兼容移动以及pc。
缺点：只适⽤于pdf⽂件，需要后端做处理转化。
（3）kkFileView
⾸先需要后端部署部署步骤详见
var url ='';//要预览⽂件的访问地址
window.open('后端服务器容器地址/onlinePreview?url='+encodeURIComponent(url));
其他⽂件形式参见官⽹⽂档
优点：可以实现⽂件预览，预览中还能进⾏⽂件的缩放且效果良好，能够分页加载以及⽀持全⽂当搜索关键词⽅便客户查看。能够适⽤于各种前端框架，能够兼容移动以及pc。以及下图的优点。
缺点：需要后端部署镜像。