在node.js后端的浏览器中查看/下载pdf

I'm generating a pdf on my node backend like this:

我在我的节点后端生成一个pdf,如下所示:

router.post('/api/submissions/generatecontract', auth, function (req, res, next) {
  if (!req.body.stallholderId || !req.body.edition) {
    return res.json({status: 400, message: 'Please enter all fields.' });
  }

  var doc = new PDFDocument();

  doc.fontSize(25).text('Here is some text', 100, 80);
  doc.end();

  return doc.pipe(res);
});

Now when I do the call to the back-end, and console.log the response, I get this output:

现在,当我对后端进行调用时,以及console.log响应,我得到了这个输出:

_body: "%PDF-1.3↵%����↵5 0 obj↵<<↵/Type /Page↵/Parent 1 0 R↵/MediaBox [0 0 612 792]↵/Contents 3 0 R↵/Resources 4 0 R↵>>↵endobj↵4 0 obj↵<<↵/ProcSet [/PDF /Text /ImageB /ImageC /ImageI]↵/Font <<↵/F1 6 0 R↵>>↵>>↵endobj↵7 0 obj↵<<↵/Producer (PDFKit)↵/Creator (PDFKit)↵/CreationDate (D:20160903110846Z)↵>>↵endobj↵6 0 obj↵<<↵/Type /Font↵/BaseFont /Helvetica↵/Subtype /Type1↵/Encoding /WinAnsiEncoding↵>>↵endobj↵2 0 obj↵<<↵/Type /Catalog↵/Pages 1 0 R↵>>↵endobj↵1 0 obj↵<<↵/Type /Pages↵/Count 1↵/Kids [5 0 R]↵>>↵endobj↵3 0 obj↵<<↵/Length 106↵/Filter /FlateDecode↵>>↵stream↵x�e�1↵�@�yE�sfvw�1��L�L.:13���+�IAS]�4Rdz��I�jcy�@�a9~8��~Zm����%WKʖ=({�ݶ�{�4 0z�<��LS��.J��↵endstream↵endobj↵xref↵0 8↵0000000000 65535 f ↵0000000446 00000 n ↵0000000397 00000 n ↵0000000503 00000 n ↵0000000119 00000 n ↵0000000015 00000 n ↵0000000300 00000 n ↵0000000208 00000 n ↵trailer↵<<↵/Size 8↵/Root 2 0 R↵/Info 7 0 R↵>>↵startxref↵681↵%%EOF↵"

_body:“%PDF-1.3↵% ↵50obj↵<<↵/ Type /Page↵/ Parent 10R↵/ MediaBox [0 0 612 792]↵/ Contents 30R↵/ Resources 4 0R↵>>↵endobj↵40obj↵<<↵/ ProcSet [/ PDF / Text / ImageB / ImageC / ImageI]↵/字体<<↵/ F1 60R↵>>↵>>↵endobj↵7 0obj↵<<↵/制片人(PDFKit)↵/创作者(PDFKit)↵/ CreationDate(D:20160903110846Z)↵>>↵endobj↵60obj↵<<↵/ Type /Font↵/ BaseFont /Helvetica↵/ Subtype /Type1↵/ Encoding /WinAnsiEncoding↵>>↵endobj↵20obj↵<<↵/ Type /Catalog↵/ Pages 10R↵>>↵endobj↵10obj↵<<↵/ Type /Pages↵/ Count 1↵/ Kids [5 0 R]↵>>↵endobj↵30obj↵<<↵/长度106↵/过滤/FlateDecode↵>>↵stream↵x e 1↵ @ yE sfvw 1 L L.:13 + IAS] 4Rdz I jcy @ a9~8 ~Zm %WKʖ=({ ݶ { 40z < LS .J ↵endstream↵endobj↵xref↵08↵000000000065535f↵000000044600000n↵000000039700000n↵000000050300000n↵000000011900000n↵00000000 15 00000n↵000000030000000n↵000000020800000n↵trailer↵<<↵/Size8↵/ Root 20R↵/ Info 70R↵>>↵startxref↵681↵%%EOF↵“

headers: Headers _headersMap:Map size: (...) proto: Map [1] 0: {"content-type" => Array[1]} key: "content-type" value: Array[1] 0: "application/pdf" length:1 proto: Array[0] proto: Object ok: true status:200 statusText:"OK" type:2 url:"http://localhost:3000/api/submissions/generatecontract"

headers:Headers _headersMap:Map size:(...)proto:Map [1] 0:{“content-type”=> Array [1]} key:“content-type”value:Array [1] 0:“ application / pdf“length:1 proto:Array [0] proto:Object ok:true status:200 statusText:”OK“type:2 url:”http:// localhost:3000 / api / submissions / generatecontract“

I see that my PDF is in the body of the response. But how can I now view it in the browser or download it? I'm using Angular2 in the front-end if that matters.

我看到我的PDF是在回复的正文中。但是我现在如何在浏览器中查看或下载呢?如果重要的话,我在前端使用Angular2。

The info I have found was for previous angular 2 versions.

我发现的信息是以前的角度2版本。

1 个解决方案

#1

I solved it like this:

我这样解决了:

  generateContract(stallholder: Stallholder, submission: Submission) {
    let headers = new Headers();
    let options = new RequestOptions({ headers: headers });

    headers.append('authorization', 'Bearer ' + this.userService.getToken());

    this.http.get(this.apiUrl + `api/editions/${submission.edition}`, options)
      .map(res => res.json()).subscribe(data => {
        if (data.status === 200) {
          let total = submission.metersStreet * data.price;
          let params = `email=${stallholder.email}&firstName=${stallholder.firstName}&lastName=${stallholder.lastName}
          &name=${stallholder.name}&metersStreet=${submission.metersStreet}&metersDepth=${submission.metersDepth}
          &edition=${submission.edition}&total=${total}`;
          this.openPdfFile(params);
        }
      });
  }

  openPdfFile(params) {
    this.downloadFile(params, function (blob) {
      let win: any = window.open('_blank');
      let blobb = new Blob([blob], {type: 'application/pdf'});
      let url: any = URL.createObjectURL(blobb);
      win.location.href = url;
    });
  }

  downloadFile(params, success) {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', this.apiUrl + 'api/submissions/generatecontract', true);
    xhr.setRequestHeader('authorization', 'Bearer ' + this.userService.getToken());
    xhr.responseType = 'arraybuffer';
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (success) {
          success(xhr.response);
        }
      }
    };
    xhr.send(params);
  }