vue如何在线预览各类型文件
更新时间:2023年11月17日 10:44:33 作者:如果会御剑
这篇文章主要介绍了vue如何在线预览各类型文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
此文章是在vue-admin-template后台上做的功能
1.新建组件previewFile => index.vue
<template> <div :class="['dialog-box',isCollapse?'analysis-dialog':'analysis']"> <el-dialog :title="`${file.title}文件预览`" :visible.sync="file.dialogVisible" :before-close="handleClose" :width="isCollapse?'calc(100% - 54px)':'calc(100% - 238px)'" top="0" > <div> <iframe class="child" frameborder="0" :src="'http://view.xdocin.com/xdoc?_xdoc=' + file.fileurl" :style="{ height: height }" /> </div> </el-dialog> </div> </template>
<script> import { mapGetters } from 'vuex' export default { props: { file: { type: Object, default: function() { return { fileurl: '', dialogVisible: false, title: '' } } } }, data() { return { height: window.innerHeight - 120 + 'px', dialogVisible: false } }, // 这里是用来判断左边菜单栏是否打开 computed: { ...mapGetters(['sidebar']), isCollapse() { return !this.sidebar.opened } }, methods: { handleClose() { this.file.dialogVisible = false } } } </script>
<style scoped> .child { width: 100%; height: 100%; border: 0; } .dialog-box>>>.el-dialog__headerbtn{ font-size: 34px; } .analysis>>>.el-dialog{ left: 119px; } .analysis-dialog>>>.el-dialog{ left: 27px; } </style>
上面用到vuex只是用来判断左边菜单栏是否打开,用来适配弹窗的宽度而已,如果不需要可以删除,不影响功能。
2.引用组件
<div> <div> <el-button size="mini" type="success" @click="handlepreview" >预览</el-button> </div> <!-- 预览文件 --> <preview-file :file="file" /> </div> <script> export default { components: { PreviewFile: () => import('@/components/previewFile/index.vue') }, data(){ return{ file: { fileurl: '', dialogVisible: false, title: '' } } }, methods:{ // 预览 handlepreview() { // console.log(index, row) // 这里的id是传给后端接口的id,没有可以不传 downtemplate({ id: row.id }).then(res => { this.file.fileurl = encodeURIComponent(res.data),//后端请求回来的文件地址url this.file.dialogVisible = true,//弹窗 this.file.title = row.title,//文件名称 }) }, } } </script>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue3中vite的@路径别名与path中resolve实例详解
这篇文章主要给大家介绍了关于vue3中vite的@路径别名与path中resolve的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-02-02VUE3刷新页面报错问题解决:Uncaught SyntaxError:Unexpected token &apo
这篇文章主要介绍了VUE3刷新页面报错:Uncaught SyntaxError: Unexpected token ‘<‘,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-03-03Vant中List组件immediate-check=false无效的解决
这篇文章主要介绍了Vant中List组件immediate-check=false无效的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-01-01
最新评论