利用iframe与Blob实现MHTML文件的无缝前端渲染

1. 从“历史记录查看”说起：一个真实的前端需求

最近在做一个金融行业的项目，客户有个挺有意思的需求。他们上线了一套全新的业务系统，但老系统里沉淀了海量的历史业务记录，比如几年前某位客户提交的申请表单、某个时间点的资产报告页面等等。这些页面不仅仅是数据，还包含了当时的界面样式、布局、甚至一些内嵌的图表。客户希望在新系统里，能原汁原味地“回放”这些历史页面，就像坐时光机回去看了一眼一样。

项目组最初的方案简单粗暴：让后端同事把老系统的页面截图，存成图片，前端直接展示图片。这方案很快被产品经理否了，理由很充分：图片没法交互，没法复制文字，也没法查看当时的页面结构。于是方案升级为：把老系统的完整HTML页面“爬”下来，交给前端渲染。听起来很美，但实操起来全是坑。爬下来的HTML，引用的CSS、JS、图片资源路径全是老系统的内网地址，在新环境里根本加载不出来。一个个去修改这些资源路径？工程量大到吓人。

最后，数据组的同事给了一个让我眼前一亮的文件格式：MHTML。他们用工具把整个网页，包括HTML、CSS、JS、图片、字体，全部打包进了一个单一的 .mht 文件里。后端把这个文件的内容作为字符串传给了我。我的任务，就是在前端浏览器里，把这个“网页压缩包”完美地解压并展示出来。这听起来是不是有点像魔术？今天我就来拆解这个魔术，核心就是利用 iframe 和 Blob 这两个前端原生能力，实现MHTML文件的无缝渲染。

2. 理解MHTML：一个自包含的“网页时光胶囊”

在动手写代码之前，我们得先搞清楚手里的“原材料”到底是什么。MHTML，全称 MIME HTML，你可以把它理解为一个网页的“时光胶囊”或者“离线包”。它和咱们平时写的HTML有本质区别。

我画了个简单的对比表，帮你一眼看明白：