Angular2 下载的 docx 响应正文为空

Question

我正在使用 Angular2 从我的 express 服务器下载生成的 .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

你应该从 function 明确地 return response.blob 因为你在箭头函数中使用了括号。

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 响应正文为空

Angular2 downloaded docx response body is empty

docx

express

docxtemplater

angular