How to manage responseType = 'blob' using Angular5 in Front end

问题

I want to download a doc.pdf that have a text 'My first file download'. When I try to download to zip file, my file have some files.xml Like in this photo

Can you suggest me how to convert this file in pdf?

Please follow my code:

Component.ts

  export(id: string) {
    this.ss.download(id)
      .subscribe(data => { console.log(`excel data: ${data}`); FileSaver.saveAs(data, 'doc.zip') },
        error => console.log('Error downloading the file.'),
        () => console.log('Completed file download.'));
  }

service.ts:

  public download(id: string): Observable<any> {
    //let oReq = new XMLHttpRequest();
    // let options = new RequestOptions({ responseType: ResponseContentType.Blob });
    let params = new URLSearchParams();
    let headers = new Headers();
    headers.append('x-access-token', this.auth.getCurrentUser().token);
    headers.append('sale_id', id);
    headers.append('Content-Type', 'application/json;charset=UTF-8');
    headers.append('responseType':'arraybuffer');
    return this.http.get(Api.getUrl(Api.URLS.download), {
      headers: headers,
      responseType: ResponseContentType.Blob,

    }).map(res => res.blob()) 
  }

Required Parameters are: Method get. Parameters need to send in header.

回答1:

I do not know if this will help you (I'm not so engaged with your tools)

The file you are downloading is a DOCX format. This is the modern MS-Word format. This format is - even if it has a different extension - a simple ZIP file.

The PK in the beginning of any zipped file is a magic code, telling consumers what kind of file this is.

"PK" goes back to "PKWARE" and points to Phil Katz, who was one of those who invented the zip format.

A zipped file - as any other file - is just a buch of bytes. A consumer has to know, how to read and interpret this.

You should try to write the byte stream down to a file exactly as you get it, name it "However.docx" and try to open this with MS-Word.

If this does not help, the byte stream might be compressed, or be somehow encoded itself... At least the picture you show us does not look as such.

Do not try to take the characters with copy and paste to any kind of editor. Such files have several invisible characters which will get lost... Take the bytes and store them just as you get them (the same you would do to store a JPEG).

来源：https://stackoverflow.com/questions/50016568/how-to-manage-responsetype-blob-using-angular5-in-front-end