📄网页储存不同格式文件代码
小白说明：哪些文件浏览器可以直接网页打开预览，哪些只能下载到本地软件打开。全部文件统一存放目录 static/doc/，文件名不要中文、不要空格。
💡小白重点提醒：
✅可以网页直接预览：PDF、图片(jpg/png/webp/svg)、mp3音频、H.264编码mp4视频、txt文本。
❌只能下载本地打开：docx(word)、xlsx(excel)、pptx(ppt)、zip压缩包、rar、7z。浏览器本身没有解析Office和压缩包的能力。
本代码备注证明网页可以作为轻资料网盘使用，可以保存到本地硬盘和挂云端网页上作为网盘使用，对于审核和保密性会有所取舍。
📋 文件格式对照表
| 文件后缀格式 |
网页能否在线预览 |
按钮配置 |
| .pdf |
✅可以预览 |
在线预览按钮 + 下载按钮 |
| .jpg .png .webp .svg |
✅可以预览 |
一般用img标签嵌入页面 |
| .mp3 |
✅可以预览播放 |
audio播放器 |
| .mp4(H.264编码) |
✅可以预览播放 |
video播放器 |
| .txt .json |
✅可以预览 |
新标签打开 + 下载按钮 |
| .docx .xlsx .pptx |
❌不能预览 |
只保留下载按钮 |
| .zip .rar .7z |
❌不能预览 |
只保留下载按钮 |
📋全部格式复制模板（直接复制下面代码使用）
<!--1、PDF模板：支持在线预览+下载-->
<div class="doc‑item">
<div class="doc‑title">示例文档.pdf</div>
<div class="doc‑meta">格式：PDF</div>
<div class="doc‑desc">写这个文档是干什么用的简单说明。</div>
<div class="btn‑group">
<a class="btn‑open" href="./static/doc/demo.pdf" target="_blank">🔍在线打开预览</a>
<a class="btn‑download" href="./static/doc/demo.pdf" download>📥下载文件</a>
</div>
</div>
<!--2、TXT文本模板：支持在线预览+下载-->
<div class="doc‑item">
<div class="doc‑title">记录文本.txt</div>
<div class="doc‑meta">格式：TXT文本</div>
<div class="doc‑desc">纯文字记录文本，浏览器新标签可以直接打开阅读。</div>
<div class="btn‑group">
<a class="btn‑open" href="./static/doc/note.txt" target="_blank">🔍在线打开预览</a>
<a class="btn‑download" href="./static/doc/note.txt" download>📥下载文件</a>
</div>
</div>
<!--3、Word docx模板：只能下载，不能预览-->
<div class="doc‑item">
<div class="doc‑title">工作报告.docx</div>
<div class="doc‑meta">格式：Word(docx)</div>
<div class="doc‑desc">小白提示：word文档浏览器无法直接看，请下载，电脑用WPS/Word打开。</div>
<div class="btn‑group">
<a class="btn‑download" href="./static/doc/report.docx" download>📥下载Word文档</a>
</div>
</div>
<!--4、Excel xlsx模板：只能下载，不能预览-->
<div class="doc‑item">
<div class="doc‑title">参数表格.xlsx</div>
<div class="doc‑meta">格式：Excel(xlsx)</div>
<div class="doc‑desc">小白提示：表格浏览器无法直接看，请下载本地WPS/Excel打开。</div>
<div class="btn‑group">
<a class="btn‑download" href="./static/doc/table.xlsx" download>📥下载Excel表格</a>
</div>
</div>
<!--5、PPT pptx模板：只能下载，不能预览-->
<div class="doc‑item">
<div class="doc‑title">演示幻灯片.pptx</div>
<div class="doc‑meta">格式：PPT(pptx)</div>
<div class="doc‑desc">小白提示：PPT浏览器不能预览，下载本地软件打开。</div>
<div class="btn‑group">
<a class="btn‑download" href="./static/doc/show.pptx" download>📥下载PPT文件</a>
</div>
</div>
<!--6、ZIP压缩包模板：只能下载，不能预览-->
<div class="doc‑item">
<div class="doc‑title">资料合集.zip</div>
<div class="doc‑meta">格式：ZIP压缩包</div>
<div class="doc‑desc">小白提示：压缩包网页不能解压，下载到电脑解压软件解开。</div>
<div class="btn‑group">
<a class="btn‑download" href="./static/doc/files.zip" download>📥下载ZIP压缩包</a>
</div>
</div>
📋页面底部‑全部格式演示样例（仅UI展示，按钮不可点击，仅作代码模板效果参考）
⚠重要备注：下面全部条目只是UI演示，没有真实文件，按钮仅做样式展示，不支持实际点击查看、下载。复制上方代码块模板，填入真实文件路径后才能正常使用。
示例文档.pdf
格式：PDF
PDF文档，浏览器可以直接在网页新标签打开阅读。
🔍在线打开预览
📥下载文件
记录文本.txt
格式：TXT文本
纯文字记录文本，浏览器新标签可以直接打开阅读。
🔍在线打开预览
📥下载文件
工作报告.docx
格式：Word(docx)
小白提示：word文档浏览器无法直接看，请下载，电脑用WPS/Word打开。
📥下载Word文档
参数表格.xlsx
格式：Excel(xlsx)
小白提示：表格浏览器无法直接看，请下载本地WPS/Excel打开。
📥下载Excel表格
演示幻灯片.pptx
格式：PPT(pptx)
小白提示：PPT浏览器不能预览，下载本地软件打开。
📥下载PPT文件
资料合集.zip
格式：ZIP压缩包
小白提示：压缩包网页不能解压，下载到电脑解压软件解开。
📥下载ZIP压缩包