MHTML文件如何在前端页面展示

MHTML文件如何在前端页面展示

需求背景：

目前在给证券公司做项目，但是在使用新系统的过程中，甲方还希望之前之前系统的历史记录可以看到。

最初制定的计划是项目组里面做数据的把原系统页面爬取下来，转成图片，直接给到前端即可。但是产品建议说把整个页面的html爬下来再展示更好，但是在爬取html的过程中出现了若干问题，总之最后做数据的把之前的历史记录爬成MHTML格式的给了后端，我在请求的时候后端把MHTML格式文件内容以字符串格式全部给到前端。

技术背景：

1. MHTML和HTML

总结：

• HTML：适合在线浏览，依赖外部资源。
• MHTML：适合保存完整网页，便于离线使用和分享。

2. mhtml2html

​ 需要了解这个库的使用方式，其官网地址如下：mhtml2html - npm

3. 为什么需要 .window.document？

原因 1：模拟浏览器环境

• mhtml2html 的设计可能是为了在 Node.js 或浏览器中模拟一个独立的浏览器环境（类似 jsdom 或 iframe），以正确解析 MHTML 文件的资源（如 CSS、图片、脚本等）。
• 在这种情况下，生成的 convertedHTML 对象会包含一个完整的 window 对象，其内部才有 document 和 documentElement。

原因 2：隔离文档作用域

• MHTML 文件可能包含独立的 HTML、CSS 和 JavaScript 代码，需要在一个隔离的环境中运行，避免污染当前页面的全局作用域。
• 通过将文档封装在 window 对象中，mhtml2html 实现了这种隔离。

4. innerHTML和outerHTML

解决思路：

1. 使用iframe展示内容

1. 首先，你可能需要一个库来解析MHTML文件。可以使用`mhtml2html`库来将MHTML转换为HTML。
2. **Blob**: 用于创建一个包含HTML内容的Blob对象。
3. **URL.createObjectURL**: 生成一个临时的URL，用于在`iframe`中加载HTML内容。

核心代码示例:

<template>
  <div>
    <!-- 使用 iframe 展示 MHTML 内容 -->
    <iframe :src="iframeSrc" width="100%" height="500px"></iframe>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import mhtml2html from "mhtml2html";

export default {
  setup() {
    const iframeSrc = ref(""); // 用于存储 iframe 的 src

    // 加载并解析 MHTML 文件
    const loadMHTML = async () => {
      try {
        // 假设你有一个 MHTML 文件的 URL
        const mhtmlUrl = "/path/to/your/file.mhtml";

        // 获取 MHTML 文件内容
        const response = await fetch(mhtmlUrl);
        const mhtmlContent = await response.text();
        // parse解析：将 MHTML 字符串解析为对象
        const parsedMHTML = mhtml2html.parse(mhtmlContent);
		// convert, 将 解析出的 MHTML 对象转译成含有资源的 HTML
        const convertedHTML = mhtml2html.convert(parsedMHTML);

        if (!convertedHTML?.window.document?.documentElement) {
          throw new Error("HTML转换失败，未找到可用的 documentElement");
        }
        // 注意：mhtml2html.convert 返回的是一个模拟的浏览器环境，其文档对象 (document) 必须通过 .window 访问。这种设计是为了隔离 MHTML 文件的内容，确保资源解析和样式作用域的正确性。直接使用 convertedHTML.document 会失败，因为 document 并未直接暴露在返回值顶层。
        const htmlContent =
          convertedHTML.window.document.documentElement.outerHTML;
        loadingText.value = "解析成功，开始展示";
        // 创建 Blob URL
        const blob = new Blob([htmlContent], { type: "text/html" });
        iframeSrc.value = URL.createObjectURL(blob);
      } catch (error) {
        console.error("Failed to load MHTML file:", error);
      }
    };

    // 在组件挂载时加载 MHTML 文件
    onMounted(() => {
      loadMHTML();
    });

    // 在组件销毁时清理 Blob URL
    onBeforeUnmount(() => {
      if (iframeSrc.value) {
        URL.revokeObjectURL(iframeSrc.value);
      }
    });

    return {
      iframeSrc,
    };
  },
};
</script>

<style scoped>
iframe {
  border: 1px solid #ccc;
}
</style>

2. 使用v-html展示内容

​ 本来想将解析出来的html文本内容直接通过v-html展示，但是实际展示却是html字符串，所以不推荐使用这种方式。

总结:

实际上这个功能不算复杂，但是对于一些基础的前端知识先需要了解，否则会踩坑，有较长的试错时间。