index.html

Question

我正在将数据发送到我的服务器，该服务器根据请求创建了一个pdf文件，该请求创建得很好，但是我无法将文件发送回客户端。我正在使用React提交表单

handleSubmit(event) {
event.preventDefault();
var body = {
  id: this.state.id,
  text: this.state.text
}
fetch('http://localhost:5000/pdf', {
            method: 'POST',
            body: JSON.stringify(body),
            headers: {
                'Content-Type': 'application/json'
            },
        }).then(function(file) {
          window.open(file.url);
        });
}

它正在打开http://localhost:5000/pdf，但是由于我没有GET路由，因此没有下载。这是我的POST路线

router.post('/pdf', async function(req, res) {
  var makePdf = require('./file-create/pdf.js');
  makePdf(req, res);
});

并且文件以pdfDoc.pipe(res);的形式返回

我不能仅使用GET路由，因为无法以这种方式发送数据，如何获取此文件以发送给客户端？

Answer 1

使用window.open时，您正在调用GET请求。这将在带有URL的新标签页中打开URL。当您将它从GET更改为POST时，它将无法使用。

要解决此问题，可以使用downloadjs（https://www.npmjs.com/package/downloadjs）来下载从服务器返回的Blob。

我在下面提供了一些示例代码。其中包括带有抓取请求的index.html文件和用于返回简单pdf的server.js。

index.html

var body = {
  id: 1,
  text: 'hello world',
};

fetch('/download', {
  method: 'POST',
  body: JSON.stringify(body),
  headers: {
    'Content-Type': 'application/json'
  },
}).then(function(resp) {
  return resp.blob();
}).then(function(blob) {
  return download(blob, "CUSTOM_NAME.pdf");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/downloadjs/1.4.8/download.min.js"></script>

server.js

var express = require('express');
var app = express();

app.post('/download', function(req, res){
    res.download('./make-file/whatever.pdf');
});

app.listen(3000);

发布请求，返回下载文件

1 个答案:

index.html

server.js