0214
/
ALOps_sys1
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

【web】 预览现在功能实现

Browse Source
dev
Wangxin 8 months ago
parent f095eb13ad
commit d036f6de7f
1 changed files with 219 additions and 50 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 267
      ALOps_sys_fe/alops-ui/src/views/QandA/knowledge/index.vue

267
ALOps_sys_fe/alops-ui/src/views/QandA/knowledge/index.vue
Unescape View File

@ -27,8 +27,10 @@
</el-table-column>
<el-table-column label="操作" align="center" width="240" class-name="small-padding fixed-width">
<template slot-scope="scope" v-if="scope.row.id !== 1">
<el-button size="mini" type="text" icon="el-icon-view" @click="previewFile(scope.row)" v-hasPermi="['QandA:knowledge:preview']">预览</el-button>
<el-button size="mini" type="text" icon="el-icon-download" @click="downloadFile(scope.row)" v-hasPermi="['QandA:knowledge:filedownload']">下载</el-button>
<el-button size="mini" type="text" icon="el-icon-view" @click="previewFile(scope.row)" v-hasPermi="['QandA:knowledge:filepreview']">预览</el-button>
<a href="javascript:void(0)" class="el-button el-button--text el-button--mini" @click="downloadFile(scope.row)" v-hasPermi="['QandA:knowledge:filedownload']">
<i class="el-icon el-icon-download"></i> 下载
</a>
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['QandA:knowledge:update']">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['QandA:knowledge:del']">删除</el-button>
</template>
@ -82,7 +84,7 @@
</template>
<script>
import { list, del, add, update, permanentKnowledgeList, uploadedFilesList, downloadFile } from "@/api/QandA/knowledge"
import { list, del, add, update, permanentKnowledgeList, uploadedFilesList } from "@/api/QandA/knowledge"
import { getToken } from "@/utils/auth"
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
@ -381,61 +383,228 @@ export default {
submitFileForm() {
this.$refs.upload.submit()
},
// 预览文件
// 预览文件 - 基于二进制数据的预览
previewFile(row) {
// 构建完整的文件路径
const filePath = this.appBase + row.filePath;
// 获取token
const token = this.$store.getters.token;
// 根据文件格式进行不同处理
// 构建下载URL（与下载使用相同的接口）
const previewUrl = `${this.appBase}/QandA/knowledge/file/download/${row.id}`;
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
xhr.open('GET', previewUrl, true);
// 设置请求头
xhr.setRequestHeader('Authorization', `Bearer ${token}`);
// 根据文件类型设置响应类型
if (row.format === 'txt') {
// 对于txt文件，可以通过新窗口打开直接预览
window.open(filePath, '_blank');
} else if (row.format === 'docx') {
// 对于docx文件，可以使用在线预览服务或通过新窗口打开
// 这里使用新窗口打开的方式
window.open(filePath, '_blank');
// 也可以使用在线预览服务，例如：
// const previewUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(filePath)}`;
// window.open(previewUrl, '_blank');
xhr.responseType = 'text'; // 文本文件直接获取文本内容
} else if (['png', 'jpg', 'jpeg', 'gif', 'bmp'].includes(row.format.toLowerCase())) {
xhr.responseType = 'blob'; // 图片文件获取Blob对象
} else if (row.format === 'pdf') {
xhr.responseType = 'blob'; // PDF文件获取Blob对象
} else {
// 其他文件格式的处理
this.$message.info('暂不支持此文件格式的预览');
// 其他格式，先尝试获取文本，不行再提示
xhr.responseType = 'text';
}
// 请求完成处理函数
xhr.onload = function() {
if (xhr.status === 200) {
if (row.format === 'txt') {
// 文本文件预览
this.previewTextFile(xhr.response, row.source);
} else if (['png', 'jpg', 'jpeg', 'gif', 'bmp'].includes(row.format.toLowerCase())) {
// 图片文件预览
this.previewImageFile(xhr.response, row.source);
} else if (row.format === 'pdf') {
// PDF文件预览
this.previewPdfFile(xhr.response, row.source);
} else if (row.format === 'docx') {
// Word文件预览 - 使用在线预览服务
const docxUrl = URL.createObjectURL(new Blob([xhr.response]));
const onlinePreviewUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(docxUrl)}`;
window.open(onlinePreviewUrl, '_blank');
} else {
// 尝试文本预览
try {
const textContent = xhr.response;
if (textContent && textContent.length > 0) {
this.previewTextFile(textContent, row.source);
} else {
this.$message.info('暂不支持此文件格式的预览');
}
} catch (e) {
this.$message.info('暂不支持此文件格式的预览');
}
}
} else {
this.$message.error('文件预览失败，请重试');
}
}.bind(this);
// 网络错误处理
xhr.onerror = function() {
this.$message.error('网络错误，文件预览失败');
}.bind(this);
// 发送请求
xhr.send();
},
// 预览文本文件
previewTextFile(content, fileName) {
// 创建预览窗口
const previewWindow = window.open('', '_blank', 'width=800,height=600');
previewWindow.document.write(`
<html>
<head>
<title>${fileName} - 预览</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; margin: 0; background-color: #f5f5f5; }
.container { max-width: 100%; margin: 0 auto; background: white; padding: 20px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
pre { white-space: pre-wrap; word-wrap: break-word; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.5; }
h1 { margin-top: 0; color: #333; font-size: 20px; }
</style>
</head>
<body>
<div class="container">
<h1>${fileName}</h1>
<pre>${content}</pre>
</div>
</body>
</html>
`);
previewWindow.document.close();
},
// 预览图片文件
previewImageFile(blob, fileName) {
// 创建图片URL
const imageUrl = URL.createObjectURL(blob);
// 创建预览窗口
const previewWindow = window.open('', '_blank', 'width=800,height=600');
previewWindow.document.write(`
<html>
<head>
<title>${fileName} - 预览</title>
<style>
body { margin: 0; padding: 20px; background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.container { max-width: 100%; max-height: 100%; text-align: center; }
img { max-width: 100%; max-height: 80vh; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h1 { color: #333; font-size: 20px; margin-bottom: 20px; }
</style>
</head>
<body>
<div class="container">
<h1>${fileName}</h1>
<img src="${imageUrl}" alt="${fileName}">
</div>
</body>
</html>
`);
previewWindow.document.close();
// 清理URL对象
previewWindow.onunload = function() {
URL.revokeObjectURL(imageUrl);
};
},
// 预览PDF文件
previewPdfFile(blob, fileName) {
// 创建PDF URL
const pdfUrl = URL.createObjectURL(blob);
// 创建预览窗口
const previewWindow = window.open('', '_blank', 'width=800,height=600');
previewWindow.document.write(`
<html>
<head>
<title>${fileName} - 预览</title>
<style>
body { margin: 0; padding: 0; height: 100vh; overflow: hidden; }
iframe { width: 100%; height: 100%; border: none; }
</style>
</head>
<body>
<iframe src="${pdfUrl}"></iframe>
</body>
</html>
`);
previewWindow.document.close();
// 清理URL对象
previewWindow.onunload = function() {
URL.revokeObjectURL(pdfUrl);
};
},
// 下载文件
// 下载文件 - 使用XMLHttpRequest处理二进制响应
downloadFile(row) {
// 使用导入的API函数进行文件下载
downloadFile(row.id).then(response => {
// 获取文件名，如果响应头中没有则使用row.source
let fileName = row.source;
const contentDisposition = response.headers['content-disposition'];
if (contentDisposition && contentDisposition.indexOf('filename=') !== -1) {
fileName = decodeURIComponent(contentDisposition.split('filename=')[1]);
// 获取token
const token = this.$store.getters.token;
// 构建下载URL
const downloadUrl = `${this.appBase}/QandA/knowledge/file/download/${row.id}`;
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
xhr.open('GET', downloadUrl, true);
// 设置请求头
xhr.setRequestHeader('Authorization', `Bearer ${token}`);
// 设置响应类型为blob
xhr.responseType = 'blob';
// 请求完成处理函数
xhr.onload = function() {
if (xhr.status === 200) {
// 获取响应头中的文件名
let fileName = row.source;
const contentDisposition = xhr.getResponseHeader('content-disposition');
if (contentDisposition && contentDisposition.indexOf('filename=') !== -1) {
fileName = decodeURIComponent(contentDisposition.split('filename=')[1]);
}
// 创建Blob对象
const blob = new Blob([xhr.response]);
// 创建下载链接
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.style.display = 'none';
// 添加到DOM并触发下载
document.body.appendChild(link);
link.click();
// 清理
document.body.removeChild(link);
URL.revokeObjectURL(link.href);
// 显示下载成功提示
this.$message.success('文件下载成功');
} else {
// 显示下载失败提示
this.$message.error('文件下载失败，请重试');
}
}.bind(this);
// 网络错误处理
xhr.onerror = function() {
this.$message.error('网络错误，文件下载失败');
}.bind(this);
// 发送请求
xhr.send();
// 创建Blob对象
const blob = new Blob([response.data]);
// 创建下载链接
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.style.display = 'none';
// 添加到DOM并触发下载
document.body.appendChild(link);
link.click();
// 清理
document.body.removeChild(link);
URL.revokeObjectURL(link.href); // 释放URL对象
// 显示下载成功提示
this.$message.success('文件下载成功');
}).catch(error => {
console.error('文件下载失败:', error);
this.$message.error('文件下载失败，请重试');
});
// 显示下载开始提示
this.$message.success('正在下载文件...');
}
}
}

Write Preview
Loading…
Cancel
Save