纯前端实现文件预览与下载
· 文件预览 · HTML
静态网站没有后端文件服务,但浏览器本身已经支持很多常见资源的查看和下载。把行为拆清楚,就能满足个人博客的大部分文件展示需求。
图片和 PDF
图片可以直接用 <img> 展示,PDF 可以用浏览器原生阅读器打开或放在 <iframe> 中。两者都建议同时提供下载链接。
文档和压缩包
Word、Excel、PPT 和压缩包的浏览器预览能力不稳定,因此默认下载最可靠。需要阅读体验时,文档可以额外导出一份 PDF。
代码文件
关键代码可以复制到文章或代码展示页中,用 <pre><code> 保留格式,同时链接到原始源码文件。