一般项目中有文件都需要先下载,再借助第三方软件来实现文件查看,有些麻烦。
现在我们只需一行代码就可以实现文件在线预览
<a href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=文档地址" target="_blank" rel="nofollow">预览</a>
// 例如
<a href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=http://kindeditor.net/doc3.php?cmd=api" target="_blank" rel="nofollow">预览</a>
vue项目中使用文件预览并页面跳转
<div class="box">
<div class="file" style v-for="(item,index) in fileList" :key="index">
<!-- @click="detail" :href="item.url"-->
<a
target="myFrameName"
:href="'http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc='+item.url"
rel="nofollow"
@click="getIfrme(item.fFileName)"
>
<span
class="text"
style="color:#000;font-size:14px;line-height:35px"
>{{item.fFileName}}</span>
<img src="../../assets/organization3.png" alt />
</a>
</div>
</div>
<iframe
v-show="ifshow"
style="width:100%;height:80%;"
id="myFrameId"
name="myFrameName"
scrolling="auto"
frameborder="0"
></iframe>