Question

我正在尝试让我的用户能够从我们的后端服务器下载文件。我已经尝试过question的解决方案以及this的后端的解决方案。

可悲的是，它们都不起作用。下载本身通过邮递员进行工作，但不起作用。

其他信息：后端在同一计算机上运行，但在端口3001上运行，而前端在端口3000上运行我不确定是否有帮助，但是react前端是通过package.json中的代理连接到后端的。

charlist

客户端当前如下所示：

"proxy": "http://localhost:3001",

在后端方面，我正在使用这段代码，与之前在stackoverflow上提出的问题相同。

    const download = require("downloadjs");

    const handleDownload = async () => {
      const res = await fetch("http://localhost:3001/download");
      const blob = await res.blob();
      download(blob, "test.pdf");
    }


    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <button onClick={() => handleDownload().finally(() =>                 console.log("Passed through the whole handleDownload Request"))}>                </button>
          </header>
        </div>
      );
    }

这是Postman的代码，但不会在React中触发下载。

react中发生的错误如下：

    app.get('/getdoc', function (req, res) {
        res.download(path.join(__dirname, 'files/test.pdf'), function (err) {
            console.log(err);
        });
    });

因此，似乎前端处理似乎是问题，因为它没有触发浏览器（Chrome）的“保存”对话框。

Answer 1

尝试：

class product(models.Model):
    add_option = models.ManyToManyField(AdditionalOption, blank = True)

Answer 2

您对邮递员的请求将有效，因为我认为您正在命中正确的端点“ / getdoc”，这将使您可以通过邮递员下载pdf。

但是，您的提取请求似乎与提供pdf文档的API端点不匹配。这就是为什么您的React Component在下载时会给您错误。


const handleDownload = async () => {
   const res = await fetch("http://localhost:3001/download");
   const blob = await res.blob();
   download(blob, "test.pdf");
  }

//the fetch call for "http://localhost:3001/download"  will not hit '/getdoc'

app.get('/getdoc', function (req, res) {
        res.download(path.join(__dirname, 'files/test.pdf'), function (err) {
            console.log(err);
        });
    });

这是我实施pdf下载的方式。

//resume route... this route is hit when you make a GET request to /api/resume
const router = require('express').Router();
module.exports = router;

//when route is hit the resume is downloaded
//aka /api/resume
router.get('/', (req, res, next) => {
  try {
    const file = `${__dirname}/resume/resume.pdf`;
    res.download(file);
    console.log('here');
  } catch (err) {
    console.log(err);
  }
});

//react component
import React from 'react';
import download from 'downloadjs';

const Resume = () => {
  return (
    <div>
      <button
        type="button"
        onClick={async () => {
          const res = await fetch('/api/resume');
          const blob = await res.blob();
          download(blob, 'test.pdf');
        }}
      >
        Download
      </button>
    </div>
  );
};

从Express Server下载ReactJS文件

2 个答案:

尝试：