网站建设费用 知乎,江西个人网站备案,《网站建设与维护》讲义,如何建设网站 企业MHTML文件如何在前端页面展示
需求背景#xff1a;
目前在给证券公司做项目#xff0c;但是在使用新系统的过程中#xff0c;甲方还希望之前之前系统的历史记录可以看到。
最初制定的计划是项目组里面做数据的把原系统页面爬取下来#xff0c;转成图片#xff0c;直接给…MHTML文件如何在前端页面展示
需求背景
目前在给证券公司做项目但是在使用新系统的过程中甲方还希望之前之前系统的历史记录可以看到。
最初制定的计划是项目组里面做数据的把原系统页面爬取下来转成图片直接给到前端即可。但是产品建议说把整个页面的html爬下来再展示更好但是在爬取html的过程中出现了若干问题总之最后做数据的把之前的历史记录爬成MHTML格式的给了后端我在请求的时候后端把MHTML格式文件内容以字符串格式全部给到前端。
技术背景
1. MHTML和HTML
特性HTMLMHTML文件格式纯文本文件扩展名为.html或.htm单一文件扩展名为.mht或.mhtml资源处理外部资源通过链接引用所有资源如图片、CSS、JS嵌入文件中用途用于创建和展示网页用于保存完整网页适合离线浏览兼容性所有浏览器均支持部分浏览器支持如IE、Edge文件大小较小因资源未嵌入较大因包含所有资源离线支持需要外部资源在线访问支持离线浏览资源已嵌入分享与保存需附带外部资源单一文件便于分享和保存
总结
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
特性innerHTMLouterHTML定义获取或设置元素内部的 HTML 内容不包含该元素本身获取或设置整个元素的 HTML包括该元素自身及其所有子元素返回内容返回元素内部的 HTML 字符串返回包含当前元素标签及其内部 HTML 的完整字符串修改行为赋值后仅会替换元素内部的内容不会改变元素自身赋值后会替换整个元素即当前元素及其所有子元素都会被更新或移除常见用途用于更新或操作元素内部的内容例如动态加载文本或子节点用于替换、删除整个元素或将元素及其内容导出为 HTML 字符串注意事项修改后元素本身的标签和属性保持不变仅子节点内容发生变化修改后原来的 DOM 引用可能失效因为整个元素可能已经被新元素替换
解决思路
1. 使用iframe展示内容
1. 首先你可能需要一个库来解析MHTML文件。可以使用mhtml2html库来将MHTML转换为HTML。
2. **Blob**: 用于创建一个包含HTML内容的Blob对象。
3. **URL.createObjectURL**: 生成一个临时的URL用于在iframe中加载HTML内容。核心代码示例:
templatediv!-- 使用 iframe 展示 MHTML 内容 --iframe :srciframeSrc width100% height500px/iframe/div
/templatescript
import { ref, onMounted } from vue;
import mhtml2html from mhtml2html;export default {setup() {const iframeSrc ref(); // 用于存储 iframe 的 src// 加载并解析 MHTML 文件const loadMHTML async () {try {// 假设你有一个 MHTML 文件的 URLconst 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 对象转译成含有资源的 HTMLconst 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 URLconst 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 URLonBeforeUnmount(() {if (iframeSrc.value) {URL.revokeObjectURL(iframeSrc.value);}});return {iframeSrc,};},
};
/scriptstyle scoped
iframe {border: 1px solid #ccc;
}
/style
2. 使用v-html展示内容
本来想将解析出来的html文本内容直接通过v-html展示但是实际展示却是html字符串所以不推荐使用这种方式。
总结:
实际上这个功能不算复杂但是对于一些基础的前端知识先需要了解否则会踩坑有较长的试错时间。
