如何在网页上下载文件下面这段代码，会渲染出一个 button，点击之后可以下载一个 html 文件，文件的内容就是 ht

下面这段代码，会渲染出一个 button，点击之后可以下载一个 html 文件，文件的内容就是 htmlCode 所指的这段字符串。

import { Button } from "antd";
const htmlCode = `<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  </head>
  <body></body>
</html>`;
const Download = () => {
  function onSave() {
    console.log(1);
    saveAs(htmlCode, "test.html");
  }

  function saveAs(content: string, filename: string) {
    // 创建隐藏的可下载链接
    const eleLink = document.createElement("a");
    eleLink.download = filename;
    eleLink.style.display = "none";
    // 字符内容转变成blob地址
    const blob = new Blob([content]);
    console.log(blob);
    eleLink.href = URL.createObjectURL(blob);
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
  }

  return (
    <>
      <Button onClick={onSave} type="primary">click</Button>
    </>
  );
};

export default Download;

效果如下图

核心部分是下面这个函数，它会生成一个 bolb 对象，并创建一个可下载的链接，之后调用eleLink.click()，就成功下载了。

function saveAs(content: string, filename: string) {
    // 创建隐藏的可下载链接
    const eleLink = document.createElement("a");
    eleLink.download = filename;
    eleLink.style.display = "none";
    // 字符内容转变成blob地址
    const blob = new Blob([content]);
    console.log(blob);
    eleLink.href = URL.createObjectURL(blob);
    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然后移除
    document.body.removeChild(eleLink);
 }