marked+html-docx实现markdown文本渲染导出docx word电子文档代码-html代码-BFW代码库

marked+html-docx实现markdown文本渲染导出docx word电子文档代码

代码语言：html

所属分类：其他

代码描述：marked+html-docx实现markdown文本渲染导出docx word电子文档代码

代码标签： marked html-docx markdown 文本渲染导出 docx word 电子文档

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

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Markdown → Word(.docx)</title>
  <style>
    :root{
      --border:#e5e7eb; --bg:#f5f7fb; --text:#111827; --muted:#6b7280; --primary:#2563eb;
    }
    *{ box-sizing:border-box; }
    body{
      margin:0; background:var(--bg); color:var(--text);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC","Microsoft YaHei", Arial, sans-serif;
    }
    .app{ max-width: 1200px; margin: 24px auto; padding: 0 16px; }
    h1{ font-size:20px; margin:8px 0 16px; }
    .toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
    button, select{
      height:36px; border:1px solid var(--border); background:#fff; border-radius:8px; padding:0 12px; cursor:pointer;
    }
    button.primary{ background:var(--primary); color:#fff; border:none; }
    .container{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
    #md{
      width:100%; height:70vh; resize:vertical; background:#fff;
      border:1px solid var(--border); border-radius:8px; padding:12px;
      font: 14px/1.6 ui-monospace, Menlo, Consolas, monospace;
    }
    .preview-wrap{
      background:#fff; border:1px solid var(--border); border-radius:8px; padding:16px;
      height: calc(70vh + 24px); overflow:auto;
    }
    #print-target{
      color:#111; font-size:14px; line-height:1.7;
    }
    #print-target img{ max-width:100%; height:auto; display:block; margin:8px 0; }
    #print-target h1,#print-target h2,#print-target h3{ margin:18px 0 8px; line-height:1.25; }
    #print-target p{ margin:10px 0; }
    #print.........完整代码请登录后点击上方下载按钮下载查看