如何在 react 和 express 中创建可下载的链接

编程问答 2022-05-14

问题描述

我有一个 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) 发送请求并在前端下载，然后创建可下载的链接，有些只使用锚标记。

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

这条路线是我的快车：

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',res) => {
    res.download(uml);
});

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

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

module.exports = router;

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

我也试过：

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

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

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

解决方法

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

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

downloadexpressexpressexpressjavascriptreactjsreactjsreactjsreactjs