66 lines
2.0 KiB
Vue
66 lines
2.0 KiB
Vue
<template>
|
|
<el-dialog
|
|
title="文档"
|
|
:model-value="visible && model === 'dialog'"
|
|
:append-to-body="appendToBody"
|
|
@update:model-value="visible = false"
|
|
>
|
|
<div v-if="visible" style="height: 690px; overflow-y: auto">
|
|
<vue-office-pdf :src="fnSrc(props.src)" style="height: 100%" @error="error" @rendered="rendered" />
|
|
</div>
|
|
<template #footer>
|
|
<el-button type="primary" @click="useDownloadFile(fnSrc(props.src))">
|
|
下载
|
|
</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
<div v-if="model === 'normal'" :key="src" style="height: 690px; overflow-y: auto">
|
|
<vue-office-pdf :src="fnSrc(props.src)" style="height: 100%" @error="error" @rendered="rendered" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import VueOfficePdf from '@vue-office/pdf'
|
|
import { ElDialog, ElButton, ElMessage } from "element-plus";
|
|
import "element-plus/es/components/dialog/style/css";
|
|
import "element-plus/es/components/button/style/css";
|
|
import { getFileUrl } from "../../utils/index.js";
|
|
import useDownloadFile from "../../hooks/useDownloadFile/index.js";
|
|
|
|
const VITE_FILE_URL = getFileUrl();
|
|
defineOptions({
|
|
name: "AppPdf",
|
|
});
|
|
const props = defineProps({
|
|
src: { type: String, required: true },
|
|
model: {
|
|
type: String,
|
|
validator: (value) => {
|
|
const typeList = ["dialog", "normal"];
|
|
if (typeList.includes(value)) {
|
|
return true;
|
|
} else {
|
|
throw new Error(`model必须是${typeList.join("、")}之一`);
|
|
}
|
|
},
|
|
default: "dialog",
|
|
},
|
|
appendToBody: { type: Boolean, default: false },
|
|
});
|
|
const visible = defineModel("visible", { type: Boolean, default: false });
|
|
const emits = defineEmits(['rendered', 'error']);
|
|
const fnSrc = (src) => {
|
|
if (!src) return;
|
|
if (src.indexOf("http") !== -1 || src.indexOf("https") !== -1) return src;
|
|
else return VITE_FILE_URL + src;
|
|
};
|
|
const rendered = () => {
|
|
emits('rendered');
|
|
}
|
|
const error = () => {
|
|
visible.value = false;
|
|
ElMessage.error("文件加载失败");
|
|
emits('error');
|
|
}
|
|
</script>
|