☰

企业官网建设流程全解析

首页 / 建站日记 / 企业官网建设流程全解析
MD文件转word文档工具
2026/6/1 5:16:00 网站建设 项目流程

下面是 Markdown 转 Word 工具在浏览器中运行时的界面截图：

界面布局说明：

  • 顶部标题区：显示"Markdown 转 Word 专业工具"主标题
  • 左侧输入区：包含文件导入功能和Markdown文本编辑区域
  • 右侧预览区：实时显示转换后的Word样式预览
  • 底部控制区：文件名设置和功能按钮（刷新预览、导出Word、清空内容）
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Markdown 转 Word 专业工具</title><scriptsrc="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script><style>*{margin:0;padding:0;box-sizing:border-box;font-family:"PingFang SC","Microsoft YaHei",sans-serif;}body{background:linear-gradient(135deg,#f0f4ff 0%,#e8f0fe 100%);min-height:100vh;padding:30px 20px;}.main-title{text-align:center;font-size:32px;color:#2563eb;margin-bottom:35px;font-weight:600;text-shadow:0 2px 4pxrgba(37,99,235,0.15);}.wrap-box{max-width:1450px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:25px;}.col-card{background:#ffffff;border-radius:16px;box-shadow:0 8px 24pxrgba(0,0,0,0.08);padding:25px;height:620px;display:flex;flex-direction:column;}.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #f1f5f9;}.card-title{font-size:19px;color:#1e293b;font-weight:500;}.file-upload{border:2px dashed #93c5fd;border-radius:10px;text-align:center;padding:12px;cursor:pointer;color:#3b82f6;margin-bottom:15px;transition:all 0.3s ease;}.file-upload:hover{background-color:#eff6ff;border-color:#3b82f6;}#fileInput{display:none;}#mdInput{flex:1;width:100%;border:1px solid #e2e8f0;border-radius:10px;padding:16px;font-size:15px;line-height:1.7;resize:none;background:#fafbfd;transition:border 0.3s;}#mdInput:focus{outline:none;border-color:#3b82f6;}#previewBox{flex:1;width:100%;border:1px solid #e2e8f0;border-radius:10px;padding:16px;overflow-y:auto;background:#ffffff;line-height:1.8;font-size:15px;}/* 文件名输入区域 */.filename-bar{max-width:1450px;margin:25px auto 0;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;}.filename-label{font-size:16px;color:#334155;font-weight:500;}#fileNameInput{padding:10px 14px;width:360px;border:1px solid #cbd5e1;border-radius:8px;font-size:15px;outline:none;transition:border 0.3s;}#fileNameInput:focus{border-color:#3b82f6;}.btn-bar{max-width:1450px;margin:20px auto 0;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;}.btn{padding:13px 36px;border-radius:10px;border:none;font-size:16px;font-weight:500;cursor:pointer;transition:all 0.3s ease;}.btn-refresh{background:#3b82f6;color:#fff;}.btn-down{background:#10b981;color:#fff;}.btn-clear{background:#f97316;color:#fff;}.btn:hover{transform:translateY(-3px);box-shadow:0 6px 16pxrgba(0,0,0,0.12);}#previewBox h1{font-size:26px;margin:16px 0;color:#1e293b;}#previewBox h2{font-size:22px;margin:14px 0;color:#334155;}#previewBox h3{font-size:19px;margin:12px 0;}#previewBox p{margin:10px 0;}#previewBox ul, #previewBox ol{margin:10px 0 10px 24px;}#previewBox blockquote{border-left:4px solid #3b82f6;padding:10px 15px;background:#f8fafc;margin:12px 0;}#previewBox table{width:100%;border-collapse:collapse;margin:15px 0;}#previewBox th, #previewBox td{border:1px solid #cbd5e1;padding:9px 12px;text-align:left;}#previewBox th{background:#f1f5f9;font-weight:600;}@media(max-width:900px){.wrap-box{grid-template-columns:1fr;}}</style></head><body><h2class="main-title">Markdown 转 Word 专业工具</h2><divclass="wrap-box"><!-- 左侧输入 --><divclass="col-card"><divclass="card-head"><spanclass="card-title">📝 Markdown 输入区</span></div><divclass="file-upload"><labelfor="fileInput">点击导入 .md / .txt 文件</label><inputtype="file"id="fileInput"accept=".md,.txt"></div><textareaid="mdInput"placeholder="请输入Markdown内容，第一行将自动作为默认文件名..."></textarea></div><!-- 右侧预览 --><divclass="col-card"><divclass="card-head"><spanclass="card-title">👁️ Word 实时预览</span></div><divid="previewBox"></div></div></div><!-- 文件名设置 --><divclass="filename-bar"><labelclass="filename-label">📄 保存文件名：</label><inputtype="text"id="fileNameInput"placeholder="自动提取第一行，可自行修改"></div><!-- 功能按钮 --><divclass="btn-bar"><buttonclass="btn btn-refresh"id="refreshPre">刷新预览</button><buttonclass="btn btn-down"id="exportWord">导出 Word 文档</button><buttonclass="btn btn-clear"id="emptyAll">清空内容</button></div><script>marked.setOptions({gfm:true,tables:true,breaks:true});constmdInput=document.getElementById('mdInput');constpreviewBox=document.getElementById('previewBox');constfileInput=document.getElementById('fileInput');constfileNameInput=document.getElementById('fileNameInput');constrefreshPre=document.getElementById('refreshPre');constexportWord=document.getElementById('exportWord');constemptyAll=document.getElementById('emptyAll');// 渲染预览functionrenderPreview(){previewBox.innerHTML=marked.parse(mdInput.value);updateFileNameFromFirstLine();// 实时更新文件名}// 自动提取第一行作为文件名functionupdateFileNameFromFirstLine(){lettext=mdInput.value.trim().split('\n')[0]||'';text=text.replace(/[#\s\|]/g,'').trim();if(text){fileNameInput.value=text;}else{fileNameInput.value='未命名文档';}}// 实时监听mdInput.addEventListener('input',renderPreview);refreshPre.addEventListener('click',renderPreview);// 文件导入fileInput.addEventListener('change',function(e){constfile=e.target.files[0];if(!file)return;constreader=newFileReader();reader.onload=res=>{mdInput.value=res.target.result;renderPreview();};reader.readAsText(file);});// 导出 Word（支持路径选择 + 自定义文件名）exportWord.addEventListener('click',function(){consttext=mdInput.value.trim();if(!text){alert('请先输入Markdown内容！');return;}consthtml=marked.parse(text);constwordHtml=`<html> <head> <meta charset="UTF-8"> <style> body{font-family:宋体,微软雅黑;font-size:15px;line-height:1.7;} table{border-collapse:collapse;width:100%;margin:12px 0;} th,td{border:1px solid #000;padding:8px;} th{background:#f2f2f2;} h1,h2,h3{font-family:黑体;} </style> </head> <body>${html}</body> </html>`;constfileName=fileNameInput.value.trim()||'未命名文档';constblob=newBlob([wordHtml],{type:"application/msword"});// 触发浏览器路径选择 + 自定义文件名保存saveAs(blob,fileName+".doc");});// 清空emptyAll.addEventListener('click',function(){mdInput.value='';previewBox.innerHTML='';fileNameInput.value='';fileInput.value='';});renderPreview();</script></body></html>
标签： 网站建设 企业官网 项目流程 UI设计 前端开发

热门文章

文章分类

标签云

网站建设 响应式设计 用户体验 SEO优化 前端开发 小程序 电商平台 性能优化

相关文章

您可能感兴趣的其他内容

人工智能【第51篇】AI Agent实战：构建智能体系统
2026/6/1 22:25:32 网站建设

人工智能【第51篇】AI Agent实战：构建智能体系统

作者的话&#xff1a;从ChatGPT到AutoGPT&#xff0c;AI Agent正在成为大模型应用的新范式。不同于传统的问答系统&#xff0c;AI Agent具备规划、记忆、工具使用等能力&#xff0c;可以自主完成复杂任务。本文将深入解析AI Agent的架构设计&#xff0c;并带你从零构建一个完整…...

阅读更多 →
别再只看准确率了！用Python的sklearn实战Brier Score和Log Loss，教你科学评估模型概率预测好坏
2026/5/31 15:13:31 网站建设

别再只看准确率了！用Python的sklearn实战Brier Score和Log Loss，教你科学评估模型概率预测好坏

概率模型评估实战&#xff1a;超越准确率的Brier Score与Log Loss深度解析在机器学习项目的最后阶段&#xff0c;当您发现模型输出的概率与实际观察结果存在明显偏差时——比如预测概率0.9的样本中实际只有50%是正例——传统的准确率、精确率等指标就显得力不从心了。本文将带您…...

阅读更多 →
UVa 12384 Span
2026/6/1 1:38:09 网站建设

UVa 12384 Span

题目描述 给定一个包含 nnn 个整数的数组 X1≤i≤nX_{1 \leq i \leq n}X1≤i≤n​&#xff0c;定义数组 XXX 的 span SSS 为一个长度为 nnn 的整数数组&#xff0c;其中 SiS_iSi​ 表示在 XiX_iXi​ 之前&#xff08;包括 XiX_iXi​ 自身&#xff09;连续满足所有元素都 ≤Xi\l…...

阅读更多 →

需要专业的网站建设服务？

联系我们获取免费的网站建设咨询和方案报价，让我们帮助您实现业务目标

立即咨询