大型办公软件过于吃内存你是不是有这样的苦恼呢下面这款产品可以支持· 文字编辑加粗、斜体、下划线、字号、颜色· 简单PPT制作多页切换、标题/正文· 表格插入可编辑的表格能够一定程度上解决您的烦恼。如果有需要的记得收藏起来关注我不迷路。html!DOCTYPE htmlhtml langzhheadmeta charsetUTF-8title迷你 Office - 文档/PPT/表格/titlestyle* {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/headbodydiv classapp!-- 工具栏 --div classtoolbar idtoolbarbutton onclickexecCmd(bold)bB/b/buttonbutton onclickexecCmd(italic)iI/i/buttonbutton onclickexecCmd(underline)uU/u/buttonspan classsep/spanselect idfontSize onchangeexecCmd(fontSize, this.value)option value4小/optionoption value5 selected中/optionoption value6大/option/selectinput typecolor idcolorPicker value#000000 onchangeexecCmd(foreColor, this.value)span classsep/spanbutton onclickexecCmd(insertOrderedList)编号/buttonbutton onclickexecCmd(insertUnorderedList)项目/buttonbutton onclickexecCmd(removeFormat)清除格式/button/div!-- Tab 切换 --div classtab-barbutton classactive data-tabdoc 文档/buttonbutton data-tabppt PPT/buttonbutton data-tabtable 表格/button/div!-- 内容 --div classcontent!-- 文档 --div idtab-doc classpage activediv iddocEditor contenteditabletrueh2欢迎使用迷你 Office/h2p这是一个轻量级的文档编辑器支持 b加粗/b、i斜体/i、u下划线/u、颜色和字号。/pp你可以像 Word 一样直接编辑文字。/p/div/div!-- PPT --div idtab-ppt classpagediv classslide-containerdiv classslide idslideDisplayh2 contenteditabletrue idslideTitle第一页标题/h2p contenteditabletrue idslideBody这里是正文内容可以编辑。/p/divdiv classslide-navbutton onclickprevSlide()◀ 上一页/buttonspan idslideCounter1 / 3/spanbutton onclicknextSlide()下一页 ▶/buttonbutton onclickaddSlide() stylemargin-left:12px;➕ 新增/buttonbutton onclickdeleteSlide() stylecolor:#d63384; 删除/button/div/div/div!-- 表格 --div idtab-table classpagediv classtable-wraptable iddataTabletrtd contenteditabletrue姓名/tdtd contenteditabletrue部门/tdtd contenteditabletrue绩效/td/trtrtd contenteditabletrue张三/tdtd contenteditabletrue研发/tdtd contenteditabletrueA/td/trtrtd contenteditabletrue李四/tdtd contenteditabletrue产品/tdtd contenteditabletrueB/td/tr/table/divdiv classtable-actionsbutton onclickaddRow()➕ 添加行/buttonbutton onclickaddCol()➕ 添加列/buttonbutton onclickremoveLastRow()➖ 删除最后行/buttonbutton onclickremoveLastCol()➖ 删除最后列/button/div/div/divdiv classstatus 双击文字可编辑 · 表格单元格可直接编辑/div/divscript// 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.html2. 双击用浏览器打开就是一个本地“办公套件”功能说明· 文档和Word一样直接打字工具栏调格式· PPT多页幻灯片双击标题/正文直接改支持增删页· 表格单元格直接编辑支持增删行列注意这是前端演示版数据存在浏览器内存里刷新页面会丢失适合体验和轻量记录。