初步可看版本
This commit is contained in:
+1
-2
@@ -1,7 +1,7 @@
|
||||
// import React from 'react';
|
||||
import {
|
||||
Links,
|
||||
LiveReload,
|
||||
// LiveReload, // 不再需要，使用Vite时会与内置HMR冲突
|
||||
Meta,
|
||||
Outlet,
|
||||
Scripts,
|
||||
@@ -77,7 +77,6 @@ export default function App() {
|
||||
</Layout>
|
||||
<ScrollRestoration />
|
||||
<Scripts />
|
||||
<LiveReload />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
+588
-1505
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
Vendored
+44
@@ -0,0 +1,44 @@
|
||||
declare module 'react-pdf' {
|
||||
import * as React from 'react';
|
||||
|
||||
interface TextItem {
|
||||
str: string;
|
||||
transform: number[];
|
||||
width: number;
|
||||
height: number;
|
||||
fontName: string;
|
||||
}
|
||||
|
||||
export interface DocumentProps {
|
||||
file: string | Uint8Array | ArrayBuffer;
|
||||
onLoadSuccess?: ({ numPages }: { numPages: number }) => void;
|
||||
onLoadError?: (error: Error) => void;
|
||||
className?: string;
|
||||
error?: React.ReactNode;
|
||||
noData?: React.ReactNode;
|
||||
loading?: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export interface PageProps {
|
||||
pageNumber: number;
|
||||
renderTextLayer?: boolean;
|
||||
renderAnnotationLayer?: boolean;
|
||||
className?: string;
|
||||
customTextRenderer?: (textItem: TextItem) => string;
|
||||
}
|
||||
|
||||
export const Document: React.FC<DocumentProps>;
|
||||
export const Page: React.FC<PageProps>;
|
||||
export const pdfjs: {
|
||||
GlobalWorkerOptions: {
|
||||
workerSrc: string;
|
||||
};
|
||||
version: string;
|
||||
};
|
||||
}
|
||||
|
||||
declare module '*.css' {
|
||||
const content: Record<string, string>;
|
||||
export default content;
|
||||
}
|
||||
Generated
+818
-50
File diff suppressed because it is too large
Load Diff
@@ -22,6 +22,7 @@
|
||||
"@uiw/react-codemirror": "^4.23.10",
|
||||
"dayjs": "^1.11.13",
|
||||
"diff": "^7.0.0",
|
||||
"docx-preview": "^0.3.5",
|
||||
"html-docx-js": "^0.3.1",
|
||||
"isbot": "^4.1.0",
|
||||
"mammoth": "^1.9.0",
|
||||
@@ -31,12 +32,14 @@
|
||||
"prismjs": "^1.30.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-pdf": "^5.7.2",
|
||||
"remixicon": "^4.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@remix-run/dev": "^2.16.2",
|
||||
"@types/react": "^18.2.20",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@types/react-pdf": "^7.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.4",
|
||||
"@typescript-eslint/parser": "^6.7.4",
|
||||
"autoprefixer": "^10.4.21",
|
||||
|
||||
+1
-1
@@ -23,7 +23,7 @@ export default defineConfig({
|
||||
],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 5173,
|
||||
port: 5178,
|
||||
open: true,
|
||||
allowedHosts: ['nas.7bm.co', 'localhost', '127.0.0.1'], // 允许的主机名列表
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user