查看/瀏覽器下載的PDF來自Node.js的後端

我生成這樣對我的節點後端PDF文件：查看/瀏覽器下載的PDF來自Node.js的後端

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); 
});

現在，當我做調用後端，和控制檯的.log響應，我得到這樣的輸出：

_body：「％PDF-1.3↵％↵50obj↵< <↵/類型/Page↵/父1個0R↵/媒體框[0 0 612 792]↵/目錄3 0 R /資源4 0 Rhone >>↵endobj↵40 obj↵< <↵/ ProcSet [/PDF/Text/ImageB/ImageC/ImageI]↵/字體< <↵/ F1 6 0 Rhone >>↵endobj↵70obj↵< <↵/ Producer（PDFKit）Creat/Creator （PDFKit ）/ CreationDate（D：20160903110846Z）↵endobj↵60obj↵< <↵/ Type /Font↵/ BaseFont /Helvetica↵/ Subtype /Type1↵/ Encoding /WinAnsiEncoding↵>>↵endobj↵2 0obj↵< <↵/ Type /Catalog↵/ Pages 1 0 Rhone >>↵endobj↵10obj↵< <↵/ Type /Pages↵/ Count1↵/ Kids [5 0 R]↵>>↵ endobj↵3 0obj↵< <↵/ Length 106/Filter /Fl ateDecode↵>>↵stream↵xe1↵@ yEsfvw1LL：13 + IAS]4Rǳ[email protected] A9〜8 〜的Zm％WKʖ=（{ݶ{4 0Z <LS.J↵endstream↵endobj↵xref↵08↵000000000065535˚F ↵000000044600000ñ↵ 0000000397 00000ñ↵000000050300000ñ ↵000000011900000ñ↵000000001500000ñ↵000000030000000ñ ↵000000020800000ñ↵trailer↵< <↵/尺寸8↵/根2 0R↵/信息7 0 R↵>> ↵startxref↵681↵%%EOF↵」

頭：頭 _headersMap：地圖尺寸：（...）原：映射[1] 0：{「content-type」=> Array [1]}鍵：「content-type」value：Array [1] 0：「application/pdf」length：1 proto：Array [0] 原：對象確定：真實狀況：200狀態文本：「OK」型：2網址：「http://localhost:3000/api/submissions/generatecontract」

我看到我的PDF是在響應主體。但是，我現在如何在瀏覽器中查看它或下載它？如果有問題，我在前端使用Angular2。

我發現的信息是以前的角度2版本。

來源

2016-09-03 stijn.aerts

此鏈接 - [從API角2下載PDF並在視圖中顯示它（http://stackoverflow.com/questions/35368633/angular-2-download -pdf-from-api-and-display-it-in-view）可能很有用 – Mikki

這不是有用的，因爲它是針對以前版本的Angular2。 –

我解決了它這樣的：

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); 
    }

來源

2016-09-04 12:22:59

查看/瀏覽器下載的PDF來自Node.js的後端

回答

相關問題