xlsx ファイルはフロントエンドのパブリック ダウンロードに配置されます

パブリック フォルダーの下に新しい静的フォルダーを作成します。このフォルダーには、下図に示すように、ダウンロードする必要がある静的リソース ファイルが保存されます。ここでは、後でダウンロードする必要がある template.xlsx ファイルを保存します。もちろん、静的フォルダーには PDF ファイルや Word ファイルなどを保存できます。a タグのダウンロード時にパスが一致していれば、静的フォルダーの下にフォルダーを作成して保存することもできます。ここでは詳細は説明しません。

注: ここでは、静的リソースを保存するためにパブリック フォルダーに新しいフォルダーを作成する必要があります。パブリック フォルダー内のファイル リソースは npm によってパッケージ化およびコンパイルされないため、静的リソースを保存するために src フォルダーに新しいフォルダーを作成することはできません。ビルドを実行します。圧縮すると、template.xlsx ファイルが dist/static フォルダーに保存されていることがわかります。

タグをシミュレートしてファイルをダウンロードする

<Button
   icon={<DownloadOutlined />}
   onClick={frontDownload}
>
   下载模板
</Button>

const frontDownload = () => {
    var a = document.createElement('a'); //创建一个标签
    a.href = '/static/批量查询条件导入模板.xlsx'; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
    a.download = '批量查询条件导入模板.xlsx'; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
    a.style.display = 'none'; // 障眼法藏起来a标签
    document.body.appendChild(a); // 将a标签追加到文档对象中
    a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
    a.remove(); // 一次性的，用完就删除a标签
};