2017-02-22 14 views
2

В моем узле/экспресс-приложение, которое я создать PDF-файл с узлом-HTML-PDF:Получение файла из узла/экспресс бэкэндом, созданного с HTML-PDF в угловых 2

exports.getTestPdf = async function(req, res) { 
    // set page format 
    const options = { format: 'A4' }; 

    // define content 
    const html = ` 
    <html> 
    <head> 
     <meta charset="utf8"> 
     <title>PDF Test</title> 
     <style> 
     .page { 
     position: relative; 
     height: 90mm; 
     width: 50mm; 
     display: block; 
     page-break-after: auto; 
     margin: 50px; 
     overflow: hidden; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="page"> 
     Page 1 
     </div> 
     <div class="page"> 
     Page 2 
     </div> 
    </body> 
    </html> 
    `; 

    // set header 
    res.set('Content-type', 'application/pdf'); 

    // create and stream file to client 
    pdf.create(html).toStream(function(err, stream){ 
    stream.pipe(res); 
    }); 

    // check: the file is created with content when saved server side 
    // pdf.create(html, options).toFile('./pdf-test.pdf', function(err, res) { 
    // if (err) return console.log(err); 
    // console.log(res); // { filename: pathtofile/pdf-test.pdf' } 
    // }); 
} 

Этот файл будет получен в интерфейсе Angular 2.

Услуги:

@Injectable() 
export class PdfService { 

    constructor (private http: Http) {} 

    getPdf(): any { 
    return this.http.get('api/test-pdf') 
        .map(res => res) 
        .catch(this.handleError); 
    } 
} 

Контроллер:

pdf(){ 
    this.userService.getPdf().subscribe(
     response => { 
     // create hidden dom element (so it works in all browsers) 
     let a = document.createElement("a"); 
     a.setAttribute('style', 'display:none;'); 
     document.body.appendChild(a); 

     var blob = new Blob([response._body], { type: 'application/pdf' }); 
     let url = window.URL.createObjectURL(blob); 
     a.href = url; 
     a.download = 'MerapiExport.pdf'; 
     a.click(); 
     }, 
     error => this.errorMessage = <any>error 
    ); 
    } 

Когда я активировать функцию моего PDF() с помощью кнопки пустой файл PDF будет закачан. Любые идеи, почему файл пуст и не имеет содержимого?

ответ

3

Я нашел решение: Вам нужно импортировать ResponseContentType из @ angular/http и изменить тип содержимого ответа от json (Standard) до буфера массива.

Под редакцией Код:

Backend узел/выразить

exports.getTestPdf = async function(req, res) { 
    // set page format 
    const options = { format: 'A4' }; 

    // define content 
    const html = ` 
    <html> 
    <head> 
     <meta charset="utf8"> 
     <title>PDF Test</title> 
     <style> 
     .page { 
     position: relative; 
     height: 90mm; 
     width: 50mm; 
     display: block; 
     page-break-after: auto; 
     margin: 50px; 
     overflow: hidden; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="page"> 
     Page 1a 
     </div> 
     <div class="page"> 
     Page 2a 
     </div> 
    </body> 
    </html> 
    `; 

    // set header 
    res.set('Content-type', 'application/pdf'); 

    // create and stream file to client 
    pdf.create(html).toStream(function(err, stream){ 
    stream.pipe(res); 
    }); 
} 

Угловое 2 службы:

getPdf(): any { 
    return this.http.get('api/user-pdf', { 
         responseType: ResponseContentType.ArrayBuffer //magic 
        }) 
        .map(res => this.downloadFile(res)) 
        .catch(this.handleError); 
    } 

    private downloadFile(data){ 
     let blob = new Blob([data._body], { type: 'application/pdf' }); 
     let url = window.URL.createObjectURL(blob); 
     window.open(url); 
     } 

Радиально-2 Контроллер

pdf(){ 
    console.log('start download') 
    this.userService.getPdf().subscribe(
     response => { 
     console.log('end download'); 
     }, 
     error => this.errorMessage = <any>error 
    ); 
    } 
+0

Идеи от: HTTP: // StackOverflow .com/вопросы/35138424/как-ду-я-доу nload-а-файл-с angular2 – Luke

Смежные вопросы