如何在 React 和 Express 中创建可下载的 link

Question

我有一个 React 应用程序，其中有一个按钮。基本上是一个div.

这是从我的按钮组件返回的，其他都是道具。

<button className={"button "+styleButton} onClick={handleClick}>
    {source && <img src={source} alt={alt} className={"image "+styleImage} /> }
    <h3 className="text">{children}</h3>
</button>

现在当有人点击这个按钮（div）时我做了什么：

const handleClick = () => {
    console.log('downloading...');
    let a = document.createElement('a');
    a.href = '192.168.43.102/download/brief';
    a.download = 'brief.pdf';
    a.click();
}

单击 div，我想在客户端下载 pdf 文件。互联网上有数百种方法。一些使用 (axios) 发送请求并在前端下载，然后创建一个可下载的 link，一些只使用锚标记。

我尝试了其中一些，但无法正常工作。同样在快递方面。

这条路线是我的快递方：

const router = require('express').Router();
const { Router } = require('express');
const path = require('path');
const { route } = require('./api');

const brief = path.join(__dirname, '..', '/public/resources/krishi-brief.pdf');
const uml = path.join(__dirname, '..', '/public/resources/krishi-uml.pdf');

router.get('/brief', (req, res) => {
    res.sendFile(brief);
});

router.get('/uml', (req, res) => {
    res.download(uml);
});

router.get('/proposal', (req, res) => {
    res.send("Not found");
});

router.get('/ppt', (req, res) => {
    res.send("Not found");
});

module.exports = router;

我有一个非常好的 pfd，它没有损坏，但是当我得到文件时，它已损坏，因为 none 的应用程序可以打开它。

我也试过：

router.get('/uml', (req, res) => {
    res.set({
      'Content-Type': 'application/pdf'
    })
    res.download(uml);
});

但现在我对实现以及这是否是正确的方法感到困惑。

请告诉我这是否是在 React 应用程序中执行此操作的正确（专业）方法，哪里错了？我只是收到损坏的文件:(

Answer 1

好的，所以当我点击下载时，服务器 192.168.43.102 应该写成 http://192.168.43.102 并且锚标记不会给出或抛出错误但只是下载我不确定的东西这甚至不在你的路线上。

我一直在努力的基本事情。

如何在 React 和 Express 中创建可下载的 link

How to create a downloadable link in react and express

javascript

download

node.js

express

reactjs