【冷门小知识】html 文件下载及嵌入当前 html 文档

1. 关于 blob（Binary Large Object 的缩写）

mdn——blob

blob 是一种可以存储大量的二进制数据的对象。它常被用来处理文件类型的数据，如图像、视频或音频文件。 Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

2. 关于 URL.createObjectURL 和 URL.revokeObjectURL

mdn——URL.createObjectURL URL.createObjectURL 则是一个 Web API 的方法，它允许创建一个特殊的 URL，这个 URL 指向存在于 Blob 对象中的数据。通过这个方法生成的 URL，可以直接在浏 览器中被引用，例如可以将其用作<img>、<video>等 HTML 元素的src属性。这样，Blob 里的数据就能够直接在网页上被展示或处理。

使用完毕后，为了避免内存泄漏，建议使用URL.revokeObjectURL()方法来释放 URL 所占用的资源。这个方法会使生成的 URL 失效，并释放相关的内存。

3. html 文件下载

和下载图片、excel 等文件相同，不同的是设置不同的 type，设定 type 为'text/html'即可。 http-content-type

① axios 请求中，设置请求头和 responseType; 例如：

axios({
  method: 'get',
  url: 'http://localhost:3000/test.html',
  responseType: 'blob', // 设置响应类型为blob
  headers: {
    'Content-Type': 'text/html'
  }
})

② 返回结果后，创建临时 a 链接下载文件；通过 URL.createObjectURL 生成链接地址

function downloadHTML(HtmlBlob:Blob, filename = 'downloaded_page.html') {
  // 创建一个指向该Blob的URL
  const url = URL.createObjectURL(HtmlBlob);

  // 创建一个临时的a标签用于下载
  const a = document.createElement('a');
   a.href = url;
  a.download = filename;

  // fix Firefox
  link.style.display = 'none'
  document.body.appendChild(a);
  a.click();

  // 清理临时的DOM元素和Blob URL
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// 调用函数下载页面
downloadHTML();

4. 利用 iframe 嵌入 html 文件

① 与上一步下载文件类似，请求回来的结果为 blob 类型，通过 URL.createObjectURL 生成链接地址，将链接地址赋值给 iframe 的 src 属性即可。

const iframeSrc = URL.createObjectURL(HtmlBlob);

// ① 通过原生方式创建 iframe
const iframe = document.createElement('iframe');
document.body.appendChild(iframe);

// ② 或者在react组件中直接使用
<iframe src={iframeSrc}/>

加载 html 资源时，显示 loading 效果

使用 JavaScript 来监听 iframe 的加载事件，并相应地显示或隐藏 loading 效果。

document.getElementById('myIframe').addEventListener('load', function() {
    // 隐藏loader
    document.getElementById('loader').style.display = 'none';

    // 显示iframe
    this.style.display = 'block';
});