<el-button size="mini" type="text" icon="el-icon-edit" @click="handlePreviewFile(obj)" >预览</el-button> <el-dialog title="预览" :visible.sync="viewVisible" width="90%" height="100%" > <iframe :src='sourceUrl' width=100% height=800 frameborder='0'> </iframe> </el-dialog> data() { return { //文件预览 viewVisible:false, //文件类型 fileType:null, //文件地址 sourceUrl:null,} } //文件预览 handlePreviewFile(e){ var xdoc_head = "https://view.xdocin.com/view?src="; this.viewVisible = true this.sourceUrl = xdoc_head+ encodeURIComponent(e.fileUrl); },
效果图
【推荐】FFA 2024大会视频回放:Apache Flink 的过去、现在及未来
【推荐】中国电信天翼云云端翼购节,2核2G云服务器一口价38元/年
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [杂谈]如何选择:Session 还是 JWT?
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
· JavaScript是按顺序执行的吗?聊聊JavaScript中的变量提升
· [杂谈]后台日志该怎么打印
· Pascal 架构 GPU 在 vllm下的模型推理优化
· WinForm 通用权限框架,简单实用支持二次开发
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
· 如何为在线客服系统的 Web Api 后台主程序添加 Bootstrap 启动页面
· 面试官:DNS解析都整不明白,敢说你懂网络?我:嘤嘤嘤!
· Fleck:一个轻量级的C#开源WebSocket服务端库