纯前端实现文件预览与下载

· 文件预览 · HTML

静态网站没有后端文件服务,但浏览器本身已经支持很多常见资源的查看和下载。把行为拆清楚,就能满足个人博客的大部分文件展示需求。

图片和 PDF

图片可以直接用 <img> 展示,PDF 可以用浏览器原生阅读器打开或放在 <iframe> 中。两者都建议同时提供下载链接。

文档和压缩包

Word、Excel、PPT 和压缩包的浏览器预览能力不稳定,因此默认下载最可靠。需要阅读体验时,文档可以额外导出一份 PDF。

代码文件

关键代码可以复制到文章或代码展示页中,用 <pre><code> 保留格式,同时链接到原始源码文件。