【Vue】vue3实现文件预览组件（预览服务使用kkfileview）

还算善良_2025-12-07 10:08

还是一样，先看效果

安装base64

java 复制代码

 npm install js-base64 --save-dev

预览组件

java 复制代码

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="'文件预览'"
    width="80%"
    top="5vh"
    destroy-on-close
    custom-class="preview-dialog"
    :close-on-click-modal="true"
    @close="handleClose"
  >
    <div class="preview-container">
      <iframe :src="iframeSrc" class="preview-iframe" frameborder="0" allowfullscreen></iframe>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="downloadFile">
          <el-icon><Download /></el-icon>
          下载文件
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Download } from '@element-plus/icons-vue';
import { Base64 } from 'js-base64';
const props = defineProps({
  fileUrl: {
    type: String,
    required: true
  }
});

const emit = defineEmits(['close']);
const dialogVisible = ref(true);
const kkfileviewUrl='http://ip:8012/onlinePreview'
// 生成KKFileView预览URL
const iframeSrc = computed(() => {
  const encodedUrl = encodeURIComponent(Base64.encode(props.fileUrl));
  return `${kkfileviewUrl}?url=${encodedUrl}`;
});

const handleClose = () => {
  emit('close');
};

const downloadFile = () => {
  const link = document.createElement('a');
  link.href = props.fileUrl;
  link.download = props.fileName || 'download';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};
</script>

<style scoped>
.preview-container {
  height: 70vh;
  background-color: #f5f7fa;
  border-radius: 4px;
  overflow: hidden;
}

.preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 自定义对话框样式 */
:deep(.preview-dialog) {
  border-radius: 8px;
}

:deep(.preview-dialog .el-dialog__header) {
  padding: 16px 20px;
  border-bottom: 1px solid var(--el-border-color-light);
}

:deep(.preview-dialog .el-dialog__body) {
  padding: 0;
}
</style>

用法

java 复制代码

//使用组件
    <KKFilePreview
      v-if="showDialog"
      :file-url="previewUrl"
      @close="showDialog = false"
    />
    
    //预览组件属性
	const showDialog = ref(false)
	const previewUrl = ref('http://xxxx.jpg')