Посмотреть/скачать PDF в браузере, который приходит от node.js бакэнду

Question

Я генерации 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); 
}); 

Теперь, когда я делаю вызов серверной и консоли .log ответ, я получаю этот выход:

_body: «% PDF-1.3↵% ↵5 0 obj↵ < < ↵/Тип/Page↵/родитель 1 0 R↵/MediaBox [0 0 612 792] ↵/Содержание 3 0 R↵/Ресурсы 4 0 R↵ >> ↵endobj↵4 0 obj↵ < < ↵/ProcSet [/PDF/Текст/ImageB/ImageC/ImageI] ↵/шрифт < < ↵/F1 6 0 R↵ >> ↵ >> ↵endobj↵7 0 obj↵ < < ↵/Производитель (PDFKit) ↵/Создатель (PDFKit) ↵/CreationDate (D: 20160903110846Z) ↵ >> ↵endobj↵6 0 obj↵ < < ↵/Тип /Font↵/BaseFont/Helvetica↵/Подтип/Тип1↵/Кодировка /WinAnsiEncoding↵ >> ↵endobj↵2 0 obj↵ < < ↵/Тип/Каталог↵/Страницы 1 0 R↵ >> ↵endobj↵1 0 obj↵ < < ↵/Тип/Страницы↵/Количество 1↵/Дети [5 0 R] ↵ >> ↵ endobj↵3 0 obj↵ < < ↵/Длина 106↵/Фильтр /Fl ateDecode↵ >> ↵stream↵xe1↵ @ yEsfvw1LL:. 13 + МСФО] 4RdzIjcy @ a9 ~ 8 ~ Zm % WKʖ = ({ ݶ { 4 0z < LS .J ↵endstream↵endobj↵xref↵0 8↵0000000000 65535 f ↵0000000446 00000 n ↵ 0000000397 00000 п ↵0000000503 00000 п ↵0000000119 00000 п ↵0000000015 00000 п ↵0000000300 00000 п ↵0000000208 00000 п ↵trailer↵ < < ↵/размер 8↵/Root 2 0 R↵/Info 7 0 R↵ >> ↵startxref↵681↵ %% EOF↵»

заголовки: заголовки _headersMap: размер карты: (...) прото: Карта [1] 0: {«content-type» => Array [1]}: значение «content-type»: Array [1] 0: «application/pdf» length: 1 proto: Array [0] проты: ок Объект: истинный статус: 200 его статус: "OK" Тип: 2 URL: "http://localhost:3000/api/submissions/generatecontract"

Я вижу, что мой PDF находится в теле ответа. Но как я могу теперь просматривать его в браузере или загружать? Я использую Angular2 в интерфейсе, если это имеет значение.

Информация, которая была найдена для предыдущих угловых версий 2.

Answer 1

Я решил так:

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