浏览器中下载文件或者在浏览器中打开html文件的实用小技巧

2023-04-28 20:05:46

下载文件或打开 HTML 文件的浏览器指南

在日常网上冲浪中，我们经常需要下载文件或打开 HTML 文件。本文将深入探讨在浏览器中执行这些操作的不同方法，提供清晰易懂的步骤和代码示例。

一、下载文件

1. 使用 Blob 对象下载文件

Blob 对象表示文件的二进制表示。我们可以利用 fetch() 和 Response() 创建 Blob 对象。

const url = 'https://example.com/file.txt';
fetch(url)
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'file.txt';
    a.click();
  });

2. 使用 FileReader 对象下载文件

FileReader 对象读取文件内容，将它们转换为二进制数据。然后我们可以使用 fetch() 和 Response() 创建 Blob 对象。

const file = document.getElementById('file-input').files[0];
const reader = new FileReader();
reader.onload = function() {
  const blob = new Blob([reader.result], {type: file.type});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = file.name;
  a.click();
};
reader.readAsBinaryString(file);

二、打开 HTML 文件

1. 使用 HTTP 服务器

HTTP 服务器 可轻松地在本地运行 HTML 文件。推荐使用 http-server 或 Live Server 。

2. 使用 Blob 对象打开 HTML 文件

我们也可以使用 Blob 对象在浏览器中打开 HTML 文件。

const html = `<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>`;
const blob = new Blob([html], {type: 'text/html'});
const url = URL.createObjectURL(blob);
window.open(url);