Python实现office简易平替
大型办公软件过于吃内存？你是不是有这样的苦恼呢？
下面这款产品可以支持：
· 文字编辑（加粗、斜体、下划线、字号、颜色）
· 简单PPT制作（多页切换、标题/正文）
· 表格插入（可编辑的表格）
能够一定程度上解决您的烦恼。
如果有需要的记得收藏起来，关注我，不迷路。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>迷你 Office - 文档/PPT/表格</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
background: #e9ecef;
display: flex;
justify-content: center;
padding: 20px;
}
.app {
width: 1000px;
max-width: 100%;
background: white;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
overflow: hidden;
}
/* 顶部工具栏 */
.toolbar {
background: #f8f9fa;
padding: 12px 16px;
border-bottom: 1px solid #dee2e6;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.toolbar button, .toolbar select, .toolbar input {
padding: 6px 12px;
border: 1px solid #ced4da;
border-radius: 6px;
background: white;
font-size: 14px;
cursor: pointer;
}
.toolbar button:hover {
background: #e9ecef;
}
.toolbar .sep {
width: 1px;
height: 28px;
background: #dee2e6;
}
.tab-bar {
display: flex;
background: #f1f3f5;
border-bottom: 1px solid #dee2e6;
}
.tab-bar button {
flex: 1;
padding: 10px 0;
border: none;
background: transparent;
font-weight: 600;
font-size: 15px;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: 0.2s;
}
.tab-bar button.active {
border-bottom-color: #0d6efd;
color: #0d6efd;
background: white;
}
.tab-bar button:hover {
background: rgba(13, 110, 253, 0.05);
}
/* 内容区域 */
.content {
padding: 20px;
min-height: 500px;
}
.page {
display: none;
}
.page.active {
display: block;
}
/* 文档编辑区 */
#docEditor {
width: 100%;
min-height: 400px;
border: 1px solid #ced4da;
border-radius: 8px;
padding: 16px;
font-size: 16px;
outline: none;
background: white;
}
#docEditor:focus {
border-color: #0d6efd;
box-shadow: 0 0 0 3px rgba(13,110,253,0.2);
}
/* PPT 幻灯片 */
.slide-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.slide {
width: 100%;
max-width: 600px;
aspect-ratio: 16 / 9;
border: 1px solid #dee2e6;
border-radius: 12px;
padding: 30px 40px;
background: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
justify-content: center;
}
.slide h2 {
font-size: 28px;
margin-bottom: 16px;
outline: none;
}
.slide p {
font-size: 18px;
line-height: 1.6;
outline: none;
}
.slide-nav {
display: flex;
gap: 12px;
align-items: center;
}
.slide-nav button {
padding: 6px 20px;
border: 1px solid #ced4da;
border-radius: 6px;
background: white;
cursor: pointer;
}
.slide-nav button:hover {
background: #e9ecef;
}
/* 表格 */
.table-wrap {
overflow-x: auto;
}
.table-wrap table {
border-collapse: collapse;
width: 100%;
min-width: 400px;
}
.table-wrap td {
border: 1px solid #adb5bd;
padding: 10px 14px;
min-width: 80px;
outline: none;
}
.table-wrap td:focus {
background: #fff3cd;
}
.table-actions {
margin-top: 12px;
display: flex;
gap: 10px;
}
.table-actions button {
padding: 6px 16px;
border: 1px solid #ced4da;
border-radius: 6px;
background: white;
cursor: pointer;
}
.table-actions button:hover {
background: #e9ecef;
}
.status {
padding: 8px 16px;
background: #f8f9fa;
border-top: 1px solid #dee2e6;
font-size: 13px;
color: #6c757d;
}
</style>
</head>
<body>
<div class="app">
<!-- 工具栏 -->
<div class="toolbar" id="toolbar">
<button onclick="execCmd('bold')"><b>B</b></button>
<button onclick="execCmd('italic')"><i>I</i></button>
<button onclick="execCmd('underline')"><u>U</u></button>
<span class="sep"></span>
<select id="fontSize" onchange="execCmd('fontSize', this.value)">
<option value="4">小</option>
<option value="5" selected>中</option>
<option value="6">大</option>
</select>
<input type="color" id="colorPicker" value="#000000" onchange="execCmd('foreColor', this.value)">
<span class="sep"></span>
<button onclick="execCmd('insertOrderedList')">编号</button>
<button onclick="execCmd('insertUnorderedList')">项目</button>
<button onclick="execCmd('removeFormat')">清除格式</button>
</div>
<!-- Tab 切换 -->
<div class="tab-bar">
<button class="active" data-tab="doc">📄 文档</button>
<button data-tab="ppt">📊 PPT</button>
<button data-tab="table">📋 表格</button>
</div>
<!-- 内容 -->
<div class="content">
<!-- 文档 -->
<div id="tab-doc" class="page active">
<div id="docEditor" contenteditable="true">
<h2>欢迎使用迷你 Office</h2>
<p>这是一个轻量级的文档编辑器，支持 <b>加粗</b>、<i>斜体</i>、<u>下划线</u>、颜色和字号。</p>
<p>你可以像 Word 一样直接编辑文字。</p>
</div>
</div>
<!-- PPT -->
<div id="tab-ppt" class="page">
<div class="slide-container">
<div class="slide" id="slideDisplay">
<h2 contenteditable="true" id="slideTitle">第一页标题</h2>
<p contenteditable="true" id="slideBody">这里是正文内容，可以编辑。</p>
</div>
<div class="slide-nav">
<button onclick="prevSlide()">◀ 上一页</button>
<span id="slideCounter">1 / 3</span>
<button onclick="nextSlide()">下一页 ▶</button>
<button onclick="addSlide()" style="margin-left:12px;">➕ 新增</button>
<button onclick="deleteSlide()" style="color:#d63384;">🗑 删除</button>
</div>
</div>
</div>
<!-- 表格 -->
<div id="tab-table" class="page">
<div class="table-wrap">
<table id="dataTable">
<tr><td contenteditable="true">姓名</td><td contenteditable="true">部门</td><td contenteditable="true">绩效</td></tr>
<tr><td contenteditable="true">张三</td><td contenteditable="true">研发</td><td contenteditable="true">A</td></tr>
<tr><td contenteditable="true">李四</td><td contenteditable="true">产品</td><td contenteditable="true">B+</td></tr>
</table>
</div>
<div class="table-actions">
<button onclick="addRow()">➕ 添加行</button>
<button onclick="addCol()">➕ 添加列</button>
<button onclick="removeLastRow()">➖ 删除最后行</button>
<button onclick="removeLastCol()">➖ 删除最后列</button>
</div>
</div>
</div>
<div class="status">💡 双击文字可编辑 · 表格单元格可直接编辑</div>
</div>
<script>
// ========== Tab 切换 ==========
document.querySelectorAll('.tab-bar button').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.tab-bar button').forEach(b => b.classList.remove('active'));
this.classList.add('active');
const tab = this.dataset.tab;
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
document.getElementById('tab-' + tab).classList.add('active');
});
});
// ========== 文档编辑（execCommand） ==========
function execCmd(cmd, value) {
document.getElementById('docEditor').focus();
if (value !== undefined) {
document.execCommand(cmd, false, value);
} else {
document.execCommand(cmd, false, null);
}
}
// ========== PPT 幻灯片管理 ==========
let slides = [
{ title: '第一页标题', body: '这里是正文内容，可以编辑。' },
{ title: '第二页 - 要点', body: '• 支持多页切换\n• 双击标题/正文编辑' },
{ title: '第三页 - 结束', body: '感谢观看！' }
];
let currentSlide = 0;
function renderSlide(index) {
const s = slides[index];
document.getElementById('slideTitle').textContent = s.title;
document.getElementById('slideBody').textContent = s.body;
document.getElementById('slideCounter').textContent = (index + 1) + ' / ' + slides.length;
}
// 保存当前编辑内容到数据
function saveCurrentSlide() {
const title = document.getElementById('slideTitle').textContent;
const body = document.getElementById('slideBody').textContent;
slides[currentSlide] = { title, body };
}
function nextSlide() {
saveCurrentSlide();
if (currentSlide < slides.length - 1) {
currentSlide++;
renderSlide(currentSlide);
}
}
function prevSlide() {
saveCurrentSlide();
if (currentSlide > 0) {
currentSlide--;
renderSlide(currentSlide);
}
}
function addSlide() {
saveCurrentSlide();
slides.push({ title: '新幻灯片', body: '输入内容...' });
currentSlide = slides.length - 1;
renderSlide(currentSlide);
}
function deleteSlide() {
if (slides.length <= 1) {
alert('至少保留一页');
return;
}
saveCurrentSlide();
slides.splice(currentSlide, 1);
if (currentSlide >= slides.length) currentSlide = slides.length - 1;
renderSlide(currentSlide);
}
// 监听幻灯片内容变化（自动保存）
document.getElementById('slideTitle').addEventListener('input', saveCurrentSlide);
document.getElementById('slideBody').addEventListener('input', saveCurrentSlide);
// 初始渲染
renderSlide(0);
// ========== 表格操作 ==========
function getTable() {
return document.getElementById('dataTable');
}
function addRow() {
const table = getTable();
const rowCount = table.rows.length;
const colCount = table.rows[0] ? table.rows[0].cells.length : 1;
const row = table.insertRow(rowCount);
for (let i = 0; i < colCount; i++) {
const cell = row.insertCell(i);
cell.contentEditable = 'true';
cell.textContent = '新列';
}
}
function addCol() {
const table = getTable();
for (let i = 0; i < table.rows.length; i++) {
const cell = table.rows[i].insertCell(table.rows[i].cells.length);
cell.contentEditable = 'true';
cell.textContent = '新行';
}
}
function removeLastRow() {
const table = getTable();
if (table.rows.length > 1) {
table.deleteRow(table.rows.length - 1);
} else {
alert('至少保留一行');
}
}
function removeLastCol() {
const table = getTable();
if (table.rows[0] && table.rows[0].cells.length > 1) {
for (let i = 0; i < table.rows.length; i++) {
table.rows[i].deleteCell(table.rows[i].cells.length - 1);
}
} else {
alert('至少保留一列');
}
}
// 点击表格单元格自动聚焦编辑
document.addEventListener('click', function(e) {
if (e.target.tagName === 'TD') {
e.target.focus();
}
});
</script>
</body>
</html>
```
---
用法
1. 把上面的代码复制，保存为 office.html
2. 双击用浏览器打开，就是一个本地“办公套件”
功能说明
· 文档：和Word一样，直接打字，工具栏调格式
· PPT：多页幻灯片，双击标题/正文直接改，支持增删页
· 表格：单元格直接编辑，支持增删行列
注意：这是前端演示版，数据存在浏览器内存里，刷新页面会丢失，适合体验和轻量记录。
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
8
0- 0
已为社区贡献7条内容
所有评论(0)