2017-09-11 3 views
0

나는 평균 스택 응용 프로그램에서 작업 중이며 프론트 엔드 (각도)에 백엔드 (익스프레스)에서 pdf를 표시하려고합니다. 그러나 매번 파일은 전송 중에 손상됩니다. 누구나 아이디어가 있습니까? 은 여기 내 코드 (간체) :Express Angular - Serve PDF

백엔드 :

import * as express from "express"; 
import * as fs from "fs"; 

myController.getPdf(req:express.Request, res:express.Response):void { 
    res.setHeader('Content-Type', 'application/pdf'); 
    res.setHeader('Content-Length', fs.statSync('myPdf.pdf').size); 
    fs.createReadStream('myPdf.pdf).pipe(res); 
} 

프런트 엔드 :

import {Http,ResponseContentType} from "@angular/http"; 

constructor(@Inject(Http) private _http:Http) {} 

this._http.get('ENDPOINT', {responseType: ResponseContentType.ArrayBuffer}) 
    .map(response => { 
     window.open(URL.createObjectURL(
      new Blob([response],{type:'application/pdf'}) 
))}); 

편집 : 미들웨어 :

import * as compression from "compression"; 
import * as zlib from "zbil"; 
import * as express from "express"; 
import * as bodyParser from "body-parser"; 
import * as session from "express-session"; 
import * as passport from "passport"; 
import * as morgan from "morgan"; 
import * as helmet from "helmet"; 

application: express.Application; 
let _root = process.cwd(); 

application.use(compression({ 
    level: zlib.Z_BEST__COMPRESSION, 
    threshold: "1kb" 
})); 
application.use(express.static(_root + "/node_modules/")); 
application.use(express.static(_root + "/jspm_packages/")); 
application.use(express.static(_root + "/client/dev/")); 
application.use(bodyParser.json()); 
application.use(session({ 
    secret: 'abcd', 
    saveUnitialized: true, 
    resave: true, 
})); 
application.use(passport.initialize()); 
application.use(passport.session()); 
application.use(morgan("dev")); 
application.use(helmet()); 

답변

0

고객님의 "Content-Length"헤더가 유효하지 않다고 생각합니다. 파일 시스템의 크기 메소드는 문자열 길이를 문자로 반환합니다.

일부 UTF-8 문자는 여러 바이트를 포함합니다.

더 좋은 방법은 http://nodejs.org/api/buffer.html에서 Buffer.byteLength (string, [encoding])를 사용하는 것입니다. 클래스 메서드이므로 Buffer 인스턴스를 만들 필요가 없습니다.

+0

흠은 ..., 파일이 여전히 출력에서 ​​읽을 수 없습니다. 사용 된 미들웨어를 추가했습니다. 아마도 그 중 하나가 전송을 망칠 것입니까? –

1

알 수 있습니다.

Content-Length로 fs.statSync ('myFile.pdf'). size를 사용하면 잘 작동했습니다.

문제

는 다른 쪽 끝이었다 응답이 블롭() 함수에 매핑 할 수 있었다 : 심지어이 변화

this._http.get(ENDPOINT, {responseType: ResponseContentType.ArrayBuffer}) 
    .map(response => { 
     window.open(URL.createObjectURL(
      new Blob(response.blob(), {type:'application/pdf'})); 
    }); 
관련 문제