将 REACT js 组件转换为 HTML 文件

Question

我有一个静态的 React 组件，它是来自数据库的信息片段。

我想创建一个函数，所以当用户点击一个按钮时，它会将 React 组件下载为 HTML 文件。

换句话说，我想允许用户下载我们在浏览器中点击 Inspect ---> Elements 时可以看到的 HTML 代码。

Answer 1

主要部分有：

• 在ref 上使用Element.outerHTML（或Element.innerHTML，如果您确定这是您想要的）将组件DOM 树序列化为HTML
• 从 HTML 创建 File
• 开始下载File

以下是一个示例，说明您可以如何做到这一点（根据您的需要进行调整）：

请注意，不幸的是，Stack Overflow 没有设置 allow-downloads on the sandbox attribute of the iframe 用于渲染实时 sn-p 演示（因此当您单击按钮时不会发生实际下载）。将此示例复制并粘贴到 HTML 文件中，然后在本地开发服务器中运行以查看它是否正常工作。

<div id="root"></div><script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.16.8/babel.min.js"></script><script>Babel.registerPreset('tsx', {presets: [[Babel.availablePresets['typescript'], {allExtensions: true, isTSX: true}]]});</script>
<script type="text/babel" data-type="module" data-presets="tsx,react">

const {useRef} = React;

function createHTMLFile (fileName: string, html: string): File {
  return new File([html], fileName, {type: 'text/html'});
}

function saveFile (file: File): void {
  const oUrl = URL.createObjectURL(file);
  const a = document.createElement('a');
  a.style.setProperty('display', 'none');
  a.href = oUrl;
  a.download = file.name;
  document.body.appendChild(a);
  a.click();
  a.remove();
  // 10s is arbitrary, but is more than enough for the user to download the HTML
  // even if they're preseneted with a download confirmation prompt by their
  // browser:
  const delay = 10_000;
  // the important part is that you clean up the object URL so that you don't
  // leak memory for every click (since they aren't garbage collected)
  setTimeout(() => URL.revokeObjectURL(oUrl), delay);
};

function Downloadable (props: { children?: React.ReactNode; }): React.ReactElement {
  const ref = useRef<HTMLDivElement>(null);

  const handleClick = () => {
    const div = ref.current;
    if (!div) return;
    const html = div.outerHTML;
    const fileName = `component.html`;
    saveFile(createHTMLFile(fileName, html));
  };

  return (
    <div>
      <button onClick={handleClick}>Download as HTML</button>
      <div {...{ref}}>{props.children}</div>
    </div>
  );
}

function Example (): React.ReactElement {
  return (
    <>
      <Downloadable>
        <header>
          <h1>hello world</h1>
          <p>description</p>
        </header>
      </Downloadable>
      <Downloadable>
        <h2>a list</h2>
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
        </ul>
      </Downloadable>
    </>
  );
}

ReactDOM.render(<Example />, document.getElementById('root'));

</script>

TS Playground