xgd_system/src/components/SaveAs/index.tsx

import { FC, useRef } from 'react';
import ButtonComp from '../ButtonComp';

interface PageProps {
  domId: string; // 元素id
  fileName?: string; // 文件名称
  btnName?: string; // 按钮名称
  style?: any;
}

const SaveAs: FC<PageProps> = ({
  domId,
  fileName = '文件名称',
  btnName = '文件另存',
  style
}) => {
  const downloadLink: any = useRef(null);

  const saveAs = () => {
    const element: any = document.getElementById(domId);
    const text = element.innerText || element.textContent;

    // 创建一个Blob对象，保存文本内容
    const blob = new Blob([text], { type: 'text/plain' });
    // 设置下载链接的href和download属性
    downloadLink.current.href = URL.createObjectURL(blob);
    downloadLink.current.download = fileName;
    // 点击下载链接
    downloadLink.current.click();
    // 释放下载链接
    URL.revokeObjectURL(downloadLink.current.href);
  }

  return (
    <div style={{...style}}>
      <a ref={downloadLink} style={{ display: 'none' }} />
      <ButtonComp type={'cancel'} text={btnName} onClick={() => saveAs()} />
    </div>
  )
}

export default SaveAs