如何使用Node.js + Express +下载文件并做出反应而无需重定向到基本URL

时间:2019-06-18 15:23:43

标签: node.js reactjs express

我实现了下载图像,但是出于任何原因,下载文件时,页面都会重定向到首页。

具有下载链接和功能的js页面:

<TableCell>
 <Link to={'/'}>
   <span onClick={e => downloadDigitalImage(param1, param2)}>Download</span>
 </Link>
</TableCell>

function downloadDigitalImage (img, name) {
    fetch(process.env.REACT_APP_HOST + '/decodeDigitalFile', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        image: img,
        name: name
      })
    })
      .then(response => response.json())
      .then(response => {
        window.open(process.env.REACT_APP_HOST + '/download?namefile=' + response.file, '_self')
      })
      .catch(error => {
        console.log(error)
      })
  }

在服务器上,使用nodejs + express,我首先解码文件,然后下载

app.post('/decodeDigitalFile', function (req, res, next) {
    file = req.body.image
    var Readable = require('stream').Readable
    const imgBuffer = Buffer.from(file, 'base64')
    var s = new Readable()
    s.push(imgBuffer)
    s.push(null)
    s.pipe(fs.createWriteStream(req.body.name))
    return res.status(200).send({ file: req.body.name });
})

app.get('/download', function (req, res) {
    console.log('down')
    const file = __dirname + '/' + req.query.namefile;
    res.download(file);
});

在反应中,我有一个名为search的组件(主页),该组件将states通过location发送到组件searchDetailedsearchDetailed是下载链接所在的组件。

0 个答案:

没有答案