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

【web】 预览修改

Browse Source
dev^2
Wangxin 8 months ago
parent c51056d981
commit 27b9c5c1fc
2 changed files with 383 additions and 53 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. 1
      ALOps_sys_fe/alops-ui/package.json
  2. 371
      ALOps_sys_fe/alops-ui/src/views/QandA/knowledge/index.vue

1
ALOps_sys_fe/alops-ui/package.json
Unescape View File

@ -39,6 +39,7 @@
"js-cookie": "3.0.1", "js-cookie": "3.0.1",
"jsencrypt": "3.0.0-rc.1", "jsencrypt": "3.0.0-rc.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"mammoth": "^1.11.0",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"quill": "2.0.2", "quill": "2.0.2",
"screenfull": "5.0.2", "screenfull": "5.0.2",

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

@ -90,6 +90,7 @@ import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css" import "@riophae/vue-treeselect/dist/vue-treeselect.css"
import { Splitpanes, Pane } from "splitpanes" import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css" import "splitpanes/dist/splitpanes.css"
import mammoth from 'mammoth'
export default { export default {
name: "User", name: "User",
@ -384,13 +385,16 @@ export default {
this.$refs.upload.submit() this.$refs.upload.submit()
}, },
// 预览文件 - 基于二进制数据的预览 // 预览文件 - 基于二进制数据的预览
previewFile(row) { async previewFile(row) {
// 获取token // 获取token
const token = this.$store.getters.token; const token = this.$store.getters.token;
// 构建下载URL（与下载使用相同的接口） // 构建下载URL（与下载使用相同的接口）
const previewUrl = `${this.appBase}/QandA/knowledge/file/download/${row.id}`; const previewUrl = `${this.appBase}/QandA/knowledge/file/download/${row.id}`;
// 将XMLHttpRequest包装成Promise
const getFileContent = () => {
return new Promise((resolve, reject) => {
// 创建XMLHttpRequest对象 // 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.open('GET', previewUrl, true); xhr.open('GET', previewUrl, true);
@ -405,6 +409,8 @@ export default {
xhr.responseType = 'blob'; // 图片文件获取Blob对象 xhr.responseType = 'blob'; // 图片文件获取Blob对象
} else if (row.format === 'pdf') { } else if (row.format === 'pdf') {
xhr.responseType = 'blob'; // PDF文件获取Blob对象 xhr.responseType = 'blob'; // PDF文件获取Blob对象
} else if (row.format === 'docx') {
xhr.responseType = 'arraybuffer'; // Word文件获取ArrayBuffer对象
} else { } else {
// 其他格式，先尝试获取文本，不行再提示 // 其他格式，先尝试获取文本，不行再提示
xhr.responseType = 'text'; xhr.responseType = 'text';
@ -413,24 +419,355 @@ export default {
// 请求完成处理函数 // 请求完成处理函数
xhr.onload = function() { xhr.onload = function() {
if (xhr.status === 200) { if (xhr.status === 200) {
resolve(xhr.response);
} else {
reject(new Error('文件获取失败，状态码: ' + xhr.status));
}
};
// 网络错误处理
xhr.onerror = function() {
reject(new Error('网络错误，文件获取失败'));
};
// 发送请求
xhr.send();
});
};
try {
const response = await getFileContent();
if (row.format === 'txt') { if (row.format === 'txt') {
// 文本文件预览 // 文本文件预览 - 使用与Word类似的HTML界面
this.previewTextFile(xhr.response, row.source); const blob = new Blob([response], { type: 'text/plain;charset=utf-8' });
const txtUrl = URL.createObjectURL(blob);
// 创建预览窗口，使用与Word预览类似的界面样式
const previewWindow = window.open('', '_blank', 'width=1000,height=800');
previewWindow.document.write(`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件预览 - ${row.source}</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f7fa;
}
.container {
max-width: 900px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
margin-bottom: 20px;
font-size: 24px;
}
.file-info {
background-color: #f9f9f9;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 14px;
}
.file-content {
line-height: 1.8;
color: #333;
margin-bottom: 30px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 4px;
max-height: 600px;
overflow-y: auto;
font-family: 'Courier New', monospace;
white-space: pre-wrap;
}
.download-btn {
display: inline-block;
background-color: #409EFF;
color: white;
text-decoration: none;
padding: 10px 20px;
border-radius: 4px;
font-size: 16px;
transition: background-color 0.3s;
}
.download-btn:hover {
background-color: #66b1ff;
}
.note {
color: #999;
font-size: 14px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>文件预览</h1>
<div class="file-info">
<p><strong>文件名：</strong>${row.source}</p>
<p><strong>文件格式：</strong>TXT (纯文本文件)</p>
</div>
<div class="file-content">
${response.replace(/</g, '&lt;').replace(/>/g, '&gt;')}
</div>
<a href="${txtUrl}" download="${row.source}" class="download-btn">下载原始文件</a>
</div>
</body>
</html>
`);
previewWindow.document.close();
// 当新窗口关闭时释放URL对象
previewWindow.addEventListener('beforeunload', () => {
URL.revokeObjectURL(txtUrl);
});
} else if (['png', 'jpg', 'jpeg', 'gif', 'bmp'].includes(row.format.toLowerCase())) { } else if (['png', 'jpg', 'jpeg', 'gif', 'bmp'].includes(row.format.toLowerCase())) {
// 图片文件预览 // 图片文件预览
this.previewImageFile(xhr.response, row.source); this.previewImageFile(response, row.source);
} else if (row.format === 'pdf') { } else if (row.format === 'pdf') {
// PDF文件预览 // PDF文件预览
this.previewPdfFile(xhr.response, row.source); this.previewPdfFile(response, row.source);
} else if (row.format === 'docx') { } else if (row.format === 'docx') {
// Word文件预览 - 使用在线预览服务 // Word文件预览 - 使用mammoth.js将Word转换为HTML直接在浏览器中预览
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'); if (!response || response.byteLength < 100) {
console.error('Word文档数据不完整');
this.$message.error('Word文档数据不完整，请尝试下载查看');
return;
}
try {
// 使用mammoth.js转换Word文档为HTML
const result = await mammoth.convertToHtml({ arrayBuffer: response });
const htmlContent = result.value;
const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
const docxUrl = URL.createObjectURL(blob);
// 创建预览窗口
const previewWindow = window.open('', '_blank', 'width=1000,height=800');
previewWindow.document.write(`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件预览 - ${row.source}</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f7fa;
}
.container {
max-width: 900px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
margin-bottom: 20px;
font-size: 24px;
}
.file-info {
background-color: #f9f9f9;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 14px;
}
.file-content {
line-height: 1.8;
color: #333;
margin-bottom: 30px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 4px;
max-height: 600px;
overflow-y: auto;
}
.file-content h1 {
font-size: 28px;
margin-top: 0;
}
.file-content h2 {
font-size: 24px;
}
.file-content h3 {
font-size: 20px;
}
.file-content p {
margin: 15px 0;
}
.file-content ul, .file-content ol {
margin: 15px 0;
padding-left: 30px;
}
.file-content li {
margin: 5px 0;
}
.download-btn {
display: inline-block;
background-color: #409EFF;
color: white;
text-decoration: none;
padding: 10px 20px;
border-radius: 4px;
font-size: 16px;
transition: background-color 0.3s;
}
.download-btn:hover {
background-color: #66b1ff;
}
.error-message {
color: #f56c6c;
background-color: #fef0f0;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
border: 1px solid #fbc4c4;
}
.note {
color: #999;
font-size: 14px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>文件预览</h1>
<div class="file-info">
<p><strong>文件名：</strong>${row.source}</p>
<p><strong>文件格式：</strong>DOCX (Word文档)</p>
</div>
<div class="file-content">
${htmlContent}
</div>
<a href="${docxUrl}" download="${row.source}" class="download-btn">下载原始文件</a>
<p class="note">注意：预览可能与原始文件格式略有差异，完整格式请下载原始文件查看。</p>
</div>
</body>
</html>
`);
previewWindow.document.close();
// 当新窗口关闭时释放URL对象
previewWindow.addEventListener('beforeunload', () => {
URL.revokeObjectURL(docxUrl);
});
} catch (err) {
console.error('Word文档转换失败:', err);
const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
const docxUrl = URL.createObjectURL(blob);
// 创建带有错误提示的预览窗口
const errorWindow = window.open('', '_blank', 'width=800,height=600');
errorWindow.document.write(`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件预览 - ${row.source}</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f7fa;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
margin-bottom: 20px;
font-size: 24px;
}
.file-info {
background-color: #f9f9f9;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 14px;
}
.error-message {
color: #f56c6c;
background-color: #fef0f0;
padding: 15px;
border-radius: 4px;
margin-bottom: 20px;
border: 1px solid #fbc4c4;
}
.download-btn {
display: inline-block;
background-color: #409EFF;
color: white;
text-decoration: none;
padding: 10px 20px;
border-radius: 4px;
font-size: 16px;
transition: background-color 0.3s;
}
.download-btn:hover {
background-color: #66b1ff;
}
</style>
</head>
<body>
<div class="container">
<h1>文件预览</h1>
<div class="file-info">
<p><strong>文件名：</strong>${row.source}</p>
<p><strong>文件格式：</strong>DOCX (Word文档)</p>
</div>
<div class="error-message">
<p>抱歉，Word文档预览失败。可能的原因：</p>
<ul>
<li>文档文件损坏或不完整</li>
<li>文档格式不受支持</li>
<li>浏览器内存不足</li>
</ul>
</div>
<a href="${docxUrl}" download="${row.source}" class="download-btn">下载原始文件查看</a>
</div>
</body>
</html>
`);
errorWindow.document.close();
// 当新窗口关闭时释放URL对象
errorWindow.addEventListener('beforeunload', () => {
URL.revokeObjectURL(docxUrl);
});
}
} else { } else {
// 尝试文本预览 // 尝试文本预览
try { try {
const textContent = xhr.response; const textContent = response;
if (textContent && textContent.length > 0) { if (textContent && textContent.length > 0) {
this.previewTextFile(textContent, row.source); this.previewTextFile(textContent, row.source);
} else { } else {
@ -440,18 +777,10 @@ export default {
this.$message.info('暂不支持此文件格式的预览'); this.$message.info('暂不支持此文件格式的预览');
} }
} }
} else { } catch (error) {
this.$message.error('文件预览失败，请重试'); console.error('文件预览失败:', error);
this.$message.error('文件预览失败: ' + error.message);
} }
}.bind(this);
// 网络错误处理
xhr.onerror = function() {
this.$message.error('网络错误，文件预览失败');
}.bind(this);
// 发送请求
xhr.send();
}, },
// 预览文本文件 // 预览文本文件

Write Preview
Loading…
Cancel
Save