221 lines
6.1 KiB
HTML
221 lines
6.1 KiB
HTML
<!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> |