初步可看版本
This commit is contained in:
@@ -0,0 +1,57 @@
|
||||
// 简单测试docx-preview能否正常工作
|
||||
import { renderAsync } from 'docx-preview';
|
||||
|
||||
async function testDocxPreview() {
|
||||
try {
|
||||
// DOCX文件URL
|
||||
const fileUrl = "https://dev-xc-enroll.oss-cn-guangzhou.aliyuncs.com/uploads/7840-230620112939.docx";
|
||||
console.log("正在获取文件:", fileUrl);
|
||||
|
||||
// 获取文件
|
||||
const response = await fetch(fileUrl);
|
||||
if (!response.ok) {
|
||||
throw new Error(`网络请求失败: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
console.log("文件下载成功，准备解析");
|
||||
|
||||
// 转换为ArrayBuffer
|
||||
const buffer = await response.arrayBuffer();
|
||||
console.log("获取到ArrayBuffer，长度:", buffer.byteLength);
|
||||
|
||||
// 创建容器
|
||||
const container = document.getElementById('docx-container');
|
||||
if (!container) {
|
||||
throw new Error("找不到容器元素");
|
||||
}
|
||||
|
||||
// 渲染文档
|
||||
console.log("开始渲染文档...");
|
||||
await renderAsync(buffer, container, null, {
|
||||
className: "docx-viewer",
|
||||
inWrapper: true,
|
||||
ignoreWidth: false,
|
||||
ignoreHeight: false
|
||||
});
|
||||
|
||||
console.log("文档渲染成功");
|
||||
} catch (error) {
|
||||
console.error("文档渲染失败:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后执行
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const app = document.getElementById('app');
|
||||
if (app) {
|
||||
// 创建容器
|
||||
app.innerHTML = `
|
||||
<div style="width: 100%; height: 100vh; display: flex; flex-direction: column;">
|
||||
<h1>测试 docx-preview</h1>
|
||||
<div id="docx-container" style="flex: 1; border: 1px solid #ccc; overflow: auto;"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 执行测试
|
||||
testDocxPreview();
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,221 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Word文档预览方案测试</title>
|
||||
<style>
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tab {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
background-color: #f1f1f1;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: none;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.tab.active {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
}
|
||||
#preview-container {
|
||||
flex: 1;
|
||||
border: 1px solid #ccc;
|
||||
overflow: hidden;
|
||||
background-color: #f9f9f9;
|
||||
position: relative;
|
||||
}
|
||||
.preview-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
.preview-content.active {
|
||||
display: block;
|
||||
}
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
#log {
|
||||
height: 120px;
|
||||
overflow: auto;
|
||||
background-color: #2d2d2d;
|
||||
color: #0f0;
|
||||
padding: 10px;
|
||||
font-family: monospace;
|
||||
margin-top: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.download-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.download-button {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255,255,255,0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.spinner {
|
||||
border: 5px solid #f3f3f3;
|
||||
border-top: 5px solid #3498db;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Word文档预览方案测试</h1>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tab active" data-target="office">Office Online</div>
|
||||
<div class="tab" data-target="google">Google Docs</div>
|
||||
<div class="tab" data-target="download">下载查看</div>
|
||||
</div>
|
||||
|
||||
<div id="preview-container">
|
||||
<div id="loading" class="loading">
|
||||
<div class="spinner"></div>
|
||||
<div>加载中，请稍候...</div>
|
||||
</div>
|
||||
|
||||
<div id="office-preview" class="preview-content active">
|
||||
<iframe id="office-iframe" src=""></iframe>
|
||||
</div>
|
||||
|
||||
<div id="google-preview" class="preview-content">
|
||||
<iframe id="google-iframe" src=""></iframe>
|
||||
</div>
|
||||
|
||||
<div id="download-preview" class="preview-content">
|
||||
<div class="download-container">
|
||||
<p>在线预览无法工作？</p>
|
||||
<p>您可以下载文档在本地打开</p>
|
||||
<a id="download-link" href="" class="download-button" download target="_blank">
|
||||
下载文档
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="log">
|
||||
<div>测试页面已加载，正在尝试不同的文档预览方案...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 配置
|
||||
const docUrl = "https://dev-xc-enroll.oss-cn-guangzhou.aliyuncs.com/uploads/7840-230620112939.docx";
|
||||
const officeOnlineUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(docUrl)}`;
|
||||
const googleDocsUrl = `https://docs.google.com/viewer?url=${encodeURIComponent(docUrl)}&embedded=true`;
|
||||
|
||||
// 日志函数
|
||||
function log(message) {
|
||||
const logContainer = document.getElementById('log');
|
||||
const logEntry = document.createElement('div');
|
||||
logEntry.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
|
||||
logContainer.appendChild(logEntry);
|
||||
logContainer.scrollTop = logContainer.scrollHeight;
|
||||
console.log(message);
|
||||
}
|
||||
|
||||
// 初始化函数
|
||||
function init() {
|
||||
// 设置iframe源
|
||||
document.getElementById('office-iframe').src = officeOnlineUrl;
|
||||
document.getElementById('google-iframe').src = googleDocsUrl;
|
||||
document.getElementById('download-link').href = docUrl;
|
||||
|
||||
// 设置标签切换
|
||||
const tabs = document.querySelectorAll('.tab');
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', function() {
|
||||
// 移除所有标签的active类
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
|
||||
// 添加当前标签的active类
|
||||
this.classList.add('active');
|
||||
|
||||
// 隐藏所有内容
|
||||
document.querySelectorAll('.preview-content').forEach(content => {
|
||||
content.classList.remove('active');
|
||||
});
|
||||
|
||||
// 显示对应内容
|
||||
const target = this.getAttribute('data-target');
|
||||
document.getElementById(`${target}-preview`).classList.add('active');
|
||||
|
||||
log(`切换到 ${target} 预览模式`);
|
||||
});
|
||||
});
|
||||
|
||||
// 监听iframe加载事件
|
||||
document.getElementById('office-iframe').addEventListener('load', function() {
|
||||
log('Office Online预览已加载');
|
||||
document.getElementById('loading').style.display = 'none';
|
||||
});
|
||||
|
||||
document.getElementById('google-iframe').addEventListener('load', function() {
|
||||
log('Google Docs预览已加载');
|
||||
});
|
||||
|
||||
log('页面初始化完成，正在加载Office Online预览...');
|
||||
}
|
||||
|
||||
// 页面加载完成后执行初始化
|
||||
window.addEventListener('DOMContentLoaded', init);
|
||||
|
||||
// 添加错误处理
|
||||
window.addEventListener('error', function(event) {
|
||||
log(`错误: ${event.message}`);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user