首先使用 FileReader 读取 html 文件并转为 Data URL 预览，或通过 Blob 结合 URL.createObjectURL 生成临时链接，最后用 revokeObjectURL 释放资源。
如果您需要在 浏览器 中为一个 html5 文件生成临时的可访问链接，可以使用 URL.createObjectURL 方法来创建一个指向该文件的临时 URL。这种方法常用于预览用户上传的文件或在 前端 动态加载资源。以下是实现此功能的具体步骤：
一、使用 FileReader 模拟 createObjectURL 效果
当无法直接使用 URL.createObjectURL 时，可以通过 FileReader 读取文件内容并转换为 Data URL 的形式作为替代方案。这种方式适用于小型 html 文件 的临时展示。
1、获取用户上传的 HTML 文件 对象 ，例如通过input[type=”file”] 选择文件。
2、创建一个新的 FileReader 实例，用于读取文件内容。
立即学习 “ 前端免费学习笔记（深入）”；
3、调用 readAsText() 方法将文件内容以文本形式读取。
4、在 onload 回调中，将读取到的 HTML字符串 通过 encodeURIComponent编码，并拼接成 data:text/html;charset=utf- 8 开头的 Data URL。
5、将生成的 Data URL 赋值给 iframe 的 src 属性或 window.location 以进行预览。
二、通过 Blob 和 URL.createObjectURL 生成临时链接
Blob 对象可用于 封装HTML 文件内容，结合 URL.createObjectURL 可生成可在当前会话中使用的临时 URL，适合在页面内嵌入或跳转使用。
1、从用户输入或其他来源获取 HTML 内容字符串。
2、使用 new Blob([htmlContent], {type: ‘text/html’})构造一个 Blob 对象，指定 MIME 类型为 text/html。
3、调用 URL.createObjectURL(blob) 方法生成一个唯一的临时 URL。
4、将生成的 URL 赋值给 iframe、 a 标签 的href或 location.href 以实现预览或下载。
5、在不再需要该链接时，应调用 URL.revokeObjectURL(temporaryURL)释放内存引用。
三、动态创建 HTML 文件并通过 ObjectURL 预览
在某些场景下，可能需要在 前端 动态生成完整的 HTML 文档结构，并立即提供预览能力。此时可通过脚本构造标准 HTML 内容并封装为 Blob。
1、构建完整的 HTML 字符串，包括 <!DOCTYPE html>、<html>、<head>、<body> 等基本结构。
2、将构造好的 HTML 代码包裹进 Blob 对象，确保设置正确的 type 参数为 ’text/html’。
3、使用 URL.createObjectURL() 方法将 Blob 转化为可访问的临时链接。
4、将返回的临时 URL 设置为新窗口的打开地址或模态框中的 iframe 源地址。
