原生js+css模仿word office ui文档在线编辑与导出docx、pdf文件代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：原生js+css模仿word office ui文档在线编辑与导出docx、pdf文件代码

代码标签：原生 js css 模仿 word office 文档在线编辑导出 docx pdf 文件代

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>在线文档编辑器（类 Word 界面）</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
  <style>
    :root{
      --ribbon-bg:#f3f4f6;
      --surface:#ffffff;
      --border:#d9d9e3;
      --accent:#2563eb;
      --text:#1f2937;
      --muted:#6b7280;
      --status:#fafafa;
      --group-title:#9aa0a6;
    }
    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: "Segoe UI","Noto Sans SC",system-ui,-apple-system,Arial,sans-serif;
      color:var(--text);
      background:#eef1f5;
    }
    .app{
      height:100%;
      display:flex;
      flex-direction:column;
    }
    /* 标题栏 */
    .titlebar{
      background:linear-gradient(#e9f0ff,#dee9ff);
      border-bottom:1px solid #c9d6ff;
      display:flex; align-items:center;
      gap:10px;
      padding:6px 12px;
    }
    .qa{
      display:flex; gap:6px; align-items:center;
    }
    .btn-icon{
      border:1px solid transparent;
      background:transparent;
      height:28px; width:28px; border-radius:6px;
      display:inline-flex; align-items:center; justify-content:center;
      cursor:pointer; color:#3b3b3b;
    }
    .btn-icon:hover{ background:#eef3ff; border-color:#d6defc; }
    .doc-title{
      font-weight:600; color:#2b2b2b; font-size:14px;
      padding:4px 8px; border-radius:6px; min-width:140px;
      border:1px solid transparent;
    }
    .doc-title[contenteditable="true"]:hover{ background:#f4f6ff; }
    .spacer{ flex:1; }
    .user-pill{
      font-size:12px; color:#fff; background:#3b82f6; padding:4px 10px; border-radius:999px;
    }

    /* 功能区 Tab */
    .ribbon-tabs{
      display:flex; gap:4px; align-items:center;
      padding:6px 10px;
      background:var(--ribbon-bg);
      border-bottom:1px solid var(--border);
      user-select:none;
    }
    .tab-btn{
      border:none; background:transparent;
      padding:6px 10px; border-radius:6px;
      font-weight:600; color:#374151; cursor:pointer;
    }
    .tab-btn:hover{ background:#e7ecf8; }
    .tab-btn.active{ color:var(--accent); background:#e9f1ff; }

    /* 功能区内容 */
    .ribbon{
      background:#fff;
      border-bottom:1px solid var(--border);
      padding:10px 12px;
      display:none;
      gap:14px; align-items:stretch;
      overflow-x:auto;
    }
    .ribbon.active{ display:flex; }
    .group{
      display:flex; align-items:center; gap:8px; padding-right:14px; margin-right:8px;
      border-right:1px solid var(--border);
    }
    .group:last-child{ border-right:none; margin-right:0; padding-right:0; }
    .group .title{
      font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--group-title);
      margin-right:4px; user-select:none;
    }
    /* 工具按钮与输入 */
    .btn{
      height:30px; padding:0 10px;
      background:#fff; border:1px solid #d0d5dd; border-radius:8px;
      display:inline-flex; align-items:center; gap:6px;
      cursor:pointer;
    }
    .btn:hover{ background:#f7f9ff; border-color:#c3c9f7; }
    .btn.active{ background:#e7f0ff; border-color:#9db7ff; }
    .btn .kbd{ font-weight:700; }
    select, input[type="color"], input[type="number"], input[type="text"]{
      height:30px; border:1px solid #d0d5dd; border-radius:8px; padding:0 8px; background:#fff;
    }
    input[type="color"]{ padding:0; width:36px; }
    .sep{ width:6px; }

    /* 工作区 */
    .workspace{
      flex:1; display:flex; justify-content:center; align-items:stretch; background:#e9ecf2;
      overflow:auto;
    }
    .page-wrap{
      padding:24px 32px; width:100%; display:flex; justify-content:center;
    }
    .page{
      width:210mm; min-height:297mm;
      padding:25mm 20mm; /* 页边距（可调） */
      background:#fff; color:#111;
      box-shadow: 0 0 0 1px #e5e7eb, 0 16px 46px rgba(0,0,0,.12);
      transform-origin: top center;
    }
    .page[contenteditable="true"]:focus{ outline:none; }
    .page h1,.page h2,.page h3{ margin:0 0 12px 0; }
    .page p{ margin:0 0 10px 0; line-height:1.6; }
    .page img{ max-width:100%; height:auto; }
    .page table{ border-collapse:collapse; margin:8px 0; width:auto; }
    .page td,.page th{ border:1px solid #9aa0a6; padding:6px 8px; }
    .hr{ height:1px; background:#d3d6db; margin:10px 0; }

    /* 状态栏 */
    .statusbar{
      display:flex; align-items:center; justify-content:space-between;
      padding:6px 12px; background:var(--status); border-top:1px solid var(--border);
      gap:10px;
      font-size:12px; color:#4b5563;
    }
    .zoom{
      display:flex; align-items:center; gap:8px;
    }
    .zoom input[type="range"]{ width:160px; }

    /* 小屏优化 */
    @media (max-width: 900px){
      .group .title{ display:none; }
    }
  </style>
</head>
<body>
  <div class="app">
    <!-- 标题栏 -->
    <div class="titlebar">
      <div class="qa">
        <button class="btn-icon" title="保存（导出 DOCX）" id="qa-save">💾</button>
        <button class="btn-icon" title="撤销" id="qa-undo">↶</button>
        <button class="btn-icon" title="重做" id="qa.........完整代码请登录后点击上方下载按钮下载查看