首先使用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源地址。


