70 lines
2.5 KiB
Vue
70 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog :visible.sync="pdfPreviewVisible" width="80%" append-to-body top="5vh" title="PDF预览">
|
|
<iframe :src="currentPdfUrl" width="100%" height="600px" frameborder="0"></iframe>
|
|
</el-dialog>
|
|
|
|
<el-dialog :visible.sync="imagePreviewVisible" width="60%" append-to-body top="5vh" title="图片预览">
|
|
<img :src="currentImageUrl" style="width: 100%;max-height: 60vh" />
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "GlobalFilePreview",
|
|
data() {
|
|
return {
|
|
pdfPreviewVisible: false,
|
|
currentPdfUrl: '',
|
|
imagePreviewVisible: false,
|
|
currentImageUrl: ''
|
|
};
|
|
},
|
|
methods: {
|
|
isPdf(filePath) {
|
|
return filePath && filePath.toLowerCase().endsWith('.pdf');
|
|
},
|
|
getFileBaseName(filePath) {
|
|
if (!filePath) return '';
|
|
const parts = filePath.split('/');
|
|
return parts[parts.length - 1] || '';
|
|
},
|
|
// 在线查看地址：后端以 inline 方式返回文件（图片/PDF 可直接在浏览器渲染）
|
|
getViewUrl(filePath, fileName) {
|
|
const resource = encodeURIComponent(filePath || '');
|
|
const name = encodeURIComponent(fileName || this.getFileBaseName(filePath));
|
|
return `${process.env.VUE_APP_BASE_API}/project/order/file/view?filePath=${resource}&fileName=${name}`;
|
|
},
|
|
handlePreview(attachment) {
|
|
if (!attachment || !attachment.filePath) {
|
|
return;
|
|
}
|
|
const filePath = attachment.filePath.toLowerCase();
|
|
const isImage = /\.(png|jpg|jpeg|gif)$/.test(filePath);
|
|
if (this.isPdf(filePath)) {
|
|
this.currentPdfUrl = this.getViewUrl(attachment.filePath, attachment.fileName);
|
|
this.pdfPreviewVisible = true;
|
|
} else if (isImage) {
|
|
this.currentImageUrl = this.getViewUrl(attachment.filePath, attachment.fileName);
|
|
this.imagePreviewVisible = true;
|
|
} else {
|
|
// 浏览器无法直接渲染的格式，改为新窗口打开（由浏览器决定预览或下载）
|
|
window.open(this.getViewUrl(attachment.filePath, attachment.fileName), '_blank');
|
|
}
|
|
},
|
|
downloadFile(attachment){
|
|
if (attachment){
|
|
const link = document.createElement('a');
|
|
link.href = process.env.VUE_APP_BASE_API + "/common/download/resource?resource=" +attachment.filePath;
|
|
link.download = attachment.fileName || 'file';
|
|
link.style.display = 'none';
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
}
|
|
},
|
|
}
|
|
};
|
|
</script>
|