Question

我正在使用Angular2从我的快速服务器下载生成的.docx文件。该文件由工具生成并保存在服务器上，然后发送到前端。

我的浏览器记录显示结果的长度大于0，但发送的blob没有正文，因此无法找到文档的实际内容。

我已经按照几个示例和教程，特别是this one，但到目前为止没有结果。我究竟做错了什么？

表达后端：

generate(req: express.Request, res: express.Response): void {
    try {
        var docxGenerator = new DocxGenerator();
        docxGenerator.generate((error, filename) => {
            if (error) res.send(error);
            if (filename) { 
                res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');
                res.setHeader('Content-disposition', 'attachment; filename=GeneratedFile.docx');
                var file = fs.readFileSync(filename);
                res.end(file);
            }
        });
    } catch (error) {
        res.send(error);
    }
}

Angular2服务：

export class DocxTemplaterService {

// declarations left out for brevity

constructor(
    private http: Http,
    private authService: AuthenticationService
) {
    this.headers = new Headers({'Content-Type': 'application/json'});
    this.headers.append('Authorization', 'Bearer ' + this.authService.token());
    this.options = new RequestOptions({ headers: this.headers });
}

generateDocx(): Observable<any> {
    this.options.responseType = ResponseContentType.Blob;
    return this.http
        .post(this.docxUtilUrl + '/create', JSON.stringify(module), this.options)
        .map(response => {
            console.dir(response);
            response.blob();
        })
        .catch(this.handleError);
}

private handleError(error: any) {
    return Promise.reject(error.message || error);
}
}

Angular2组件：

generateDocx(module: Module) {
   this.docxTemplateService
       .generateDocx()
       .subscribe(
            data => {
                console.log(`Word data: ${data}`);
                if (data !== undefined) 
                    // save file somehow
                else console.log('No file to download.');
            },
            error => { this.alertService.error(error); },
            () => this.alertService.success("Success", true)
        );
}

Chrome控制台中记录的Blob内容：

size: 68192
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
__proto__: Blob

所以...没有内容的大小。帮助是折旧的！

Answer 1

您应该在response.blob显式返回function，因为您在箭头函数中使用了括号。

generateDocx(): Observable<any> {
    this.options.responseType = ResponseContentType.Blob;
    return this.http
        .post(this.docxUtilUrl + '/create', JSON.stringify(module), this.options)
        .map(response => {
            console.dir(response);
            return response.blob(); //need to return response blob
        })
        .catch(this.handleError);
}

或者你可以将map函数设为一个班轮

.map(response => response.blob())

Angular2下载的docx响应体是空的

1 个答案: