初步可看版本
This commit is contained in:
+1
-2
@@ -1,7 +1,7 @@
|
|||||||
// import React from 'react';
|
// import React from 'react';
|
||||||
import {
|
import {
|
||||||
Links,
|
Links,
|
||||||
LiveReload,
|
// LiveReload, // 不再需要，使用Vite时会与内置HMR冲突
|
||||||
Meta,
|
Meta,
|
||||||
Outlet,
|
Outlet,
|
||||||
Scripts,
|
Scripts,
|
||||||
@@ -77,7 +77,6 @@ export default function App() {
|
|||||||
</Layout>
|
</Layout>
|
||||||
<ScrollRestoration />
|
<ScrollRestoration />
|
||||||
<Scripts />
|
<Scripts />
|
||||||
<LiveReload />
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
+571
-1488
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",
|
"@uiw/react-codemirror": "^4.23.10",
|
||||||
"dayjs": "^1.11.13",
|
"dayjs": "^1.11.13",
|
||||||
"diff": "^7.0.0",
|
"diff": "^7.0.0",
|
||||||
|
"docx-preview": "^0.3.5",
|
||||||
"html-docx-js": "^0.3.1",
|
"html-docx-js": "^0.3.1",
|
||||||
"isbot": "^4.1.0",
|
"isbot": "^4.1.0",
|
||||||
"mammoth": "^1.9.0",
|
"mammoth": "^1.9.0",
|
||||||
@@ -31,12 +32,14 @@
|
|||||||
"prismjs": "^1.30.0",
|
"prismjs": "^1.30.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
"react-pdf": "^5.7.2",
|
||||||
"remixicon": "^4.6.0"
|
"remixicon": "^4.6.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@remix-run/dev": "^2.16.2",
|
"@remix-run/dev": "^2.16.2",
|
||||||
"@types/react": "^18.2.20",
|
"@types/react": "^18.2.20",
|
||||||
"@types/react-dom": "^18.2.7",
|
"@types/react-dom": "^18.2.7",
|
||||||
|
"@types/react-pdf": "^7.0.0",
|
||||||
"@typescript-eslint/eslint-plugin": "^6.7.4",
|
"@typescript-eslint/eslint-plugin": "^6.7.4",
|
||||||
"@typescript-eslint/parser": "^6.7.4",
|
"@typescript-eslint/parser": "^6.7.4",
|
||||||
"autoprefixer": "^10.4.21",
|
"autoprefixer": "^10.4.21",
|
||||||
|
|||||||
+1
-1
@@ -23,7 +23,7 @@ export default defineConfig({
|
|||||||
],
|
],
|
||||||
server: {
|
server: {
|
||||||
host: '0.0.0.0',
|
host: '0.0.0.0',
|
||||||
port: 5173,
|
port: 5178,
|
||||||
open: true,
|
open: true,
|
||||||
allowedHosts: ['nas.7bm.co', 'localhost', '127.0.0.1'], // 允许的主机名列表
|
allowedHosts: ['nas.7bm.co', 'localhost', '127.0.0.1'], // 允许的主机名列表
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user