发出 POST 请求时返回空白 PDF，但可以正常使用 GET

Question

我有一个 AngularJs 前端和一个 NodeJS 后端。我正在尝试根据 AngularJS 和 return PDF 中的一些参数在 NodeJS 上构建一个 PDF 作为响应。

当我从 AngularJS 发出 GET 请求时，我使用的代码似乎工作正常，但当我发出 POST 请求时，它 return 是一个空白 PDF。我需要发出 POST 请求，因为我必须发送一些特定数据。

我先将文件保存在磁盘上，然后将其发送到前端，这样我就可以看到 PDF 正在正确生成。它要么未正确发送，要么未在前端正确读取。

以下是我的AngularJS代码

var url = {{My Node Server URL}};
            (Note: Works when I make a Get request, without sending post params)
            var $promise = $http.post(encodeURI(url), {
                    responseType: 'arraybuffer',
                    competitors: competitors,
                    channels: channels
            });

            $promise.then(

                function success(response) {


                    var blob = new Blob([response.data], { type : 'application/pdf' });
                    var pdfLink = (window.URL || window.webkitURL).createObjectURL( blob );

                    window.open(
                      pdfLink,
                      '_blank' // <- This is what makes it open in a new window.
                    );

                    cb(pdfLink);

              }, function error(response) {

                --Error Handling--
              }
           )

以下是我的 NodeJS 代码

wkhtmltopdf(
            html,
            { 
                output: pdfName
            },
            function (code, signal) {
                fs.readFile(pdfName, function (err, data) {
                    if (err) {res.writeHead(400); res.end("" + err); return;}

                    res.writeHead(
                        200,
                        {
                            "content-type" : "application/pdf",
                            "Content-Disposition": "attachment; filename=Best.pdf "
                        }
                    );
                    res.end(data);
                });     
            }
        );

我调查了很多地方并尝试了几乎所有方法，但似乎没有任何效果。任何 hint/help/suggestion 将不胜感激。请询问我是否需要提供更多信息或详细信息。 TIA

Answer 1

知道了！我只需要添加 responseType as arraybuffer 作为另一个参数。我认为这是不言自明的，为什么这有效。所以下面的代码有效！

var $promise = $http.post(encodeURI(url), {
                    competitors: competitors,
                    channels: channels
            },{responseType: 'arraybuffer'});

Answer 2

对于使用 Angular 2+ 的这种情况有问题的任何人，解决方案是相同的，但执行方式不同。参见：https://angular.io/docs/ts/latest/api/http/index/ResponseContentType-enum.html

在我的应用程序中，我将一个文档名称传递到我的快速服务器，该服务器使用 res.download(filename) 传回文件。

前端服务如下所示：

downloadDoc(docName: string) {
  let pkg = {docName: docName};
  let opts = new RequestOptions({
    responseType: ResponseContentType.ArrayBuffer
  });
  return this.http
          .post(this.baseUrl + '/downloadDoc', pkg, opts)
          .toPromise()
          .then((res: any) => {
            let blob = new Blob([res._body], {type: 'application/pdf'});
            return blob;
          });
}

发出 POST 请求时返回空白 PDF，但可以正常使用 GET

Blank PDF returned while making a POST Request but works fine with GET

node.js

wkhtmltopdf

express

angularjs

angularjs-http