javascript - How to open a preview file (pdf, docx, txt, etc.) in another page of the browser using Angular and Java - Stack Ove

admin管理员组

文章数量:1024582

I am developing a web application using Angular 7 and Java 8. I am uploading a file (pdf, docx, txt etc...), but the problem is that I can't open it in another page of the browser through a RESTful web service. I am getting the error 415 Unsupported Media Type. I have tried with the POST and GET method whitout any success. These are the snippets of the code, front-end and back-end:

Angular ponent (method called by a button passing the path + filename example : C/doc/foo.pdf)

download(doc) {     
     this.service.downloadFile(doc.path).subscribe(response => {
        if(response) {
           let blob = new Blob([response], { type: 'text/json; charset=utf-8' });
           const url= window.URL.createObjectURL(blob);
           window.open(url);
        }   
     });
 }

Angular service

downloadFile(path): Observable<Blob> {
    const url = '/download';
    return this.http.post<Blob>(url, path, { responseType: 'blob' as 'json' });
}

Java Controller

@PostMapping(value = "download", produces = { MediaType.APPLICATION_JSON_UTF8_VALUE })
@ResponseBody
public byte[] download(@RequestBody String path) {
    try {
        return this.provvedimentoService.getDownload(path);
    } catch (IOException | EgesException e) {
        e.printStackTrace();
        return null;
    }
}

Java Service

public byte[] getDownload(String pathFile) throws EgesException, IOException {
    Path path = Paths.get(pathFile);
    if(path.toFile().exists())
        return Files.readAllBytes(path);
    else
        throw new EgesException(EgesExceptionConstants.WARNING_ACT_NOTFOUND_EXCEPTION);
}

I am developing a web application using Angular 7 and Java 8. I am uploading a file (pdf, docx, txt etc...), but the problem is that I can't open it in another page of the browser through a RESTful web service. I am getting the error 415 Unsupported Media Type. I have tried with the POST and GET method whitout any success. These are the snippets of the code, front-end and back-end:

Angular ponent (method called by a button passing the path + filename example : C/doc/foo.pdf)

download(doc) {     
     this.service.downloadFile(doc.path).subscribe(response => {
        if(response) {
           let blob = new Blob([response], { type: 'text/json; charset=utf-8' });
           const url= window.URL.createObjectURL(blob);
           window.open(url);
        }   
     });
 }

Angular service

downloadFile(path): Observable<Blob> {
    const url = '/download';
    return this.http.post<Blob>(url, path, { responseType: 'blob' as 'json' });
}

Java Controller

@PostMapping(value = "download", produces = { MediaType.APPLICATION_JSON_UTF8_VALUE })
@ResponseBody
public byte[] download(@RequestBody String path) {
    try {
        return this.provvedimentoService.getDownload(path);
    } catch (IOException | EgesException e) {
        e.printStackTrace();
        return null;
    }
}

Java Service

public byte[] getDownload(String pathFile) throws EgesException, IOException {
    Path path = Paths.get(pathFile);
    if(path.toFile().exists())
        return Files.readAllBytes(path);
    else
        throw new EgesException(EgesExceptionConstants.WARNING_ACT_NOTFOUND_EXCEPTION);
}

• javascript
• java
• angular
• pdf
• ms-word

Share Improve this question Follow asked Mar 25, 2020 at 19:59 Frank PentangeliFrank Pentangeli 34622 gold badges66 silver badges2020 bronze badges 1

• You should change the produces mediatype to something else, eg application/octet-stream. – Mark Rotteveel Commented Mar 26, 2020 at 13:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

You can't. Browsers don't have any built-in way to view Word docs so unless the user has configured their browser to open it with some plugin (which 99% of the world hasn't done), the browser will prompt them to download the file.

No browsers currently have the code necessary to render Word Documents, and as far as I know, there are no client-side libraries that currently exist for rendering them either.

However, if you only need to display the Word Document, but don't need to edit it, you can use Google Documents' Viewer via an <iframe> to display a remotely hosted .pdf/ .doc/.docx /.txt etc

<iframe src="https://docs.google./gview?url=http://remote.url.tld/path/to/document.doc&embedded=true"></iframe>

Many people used this methods to view their documents file. you can check here:How to display a word document using fancybox

<iframe width="100%" height="300px" src="https://docs.google./gview?url=http://index-of.co.uk/Google/googlehacking.pdf&embedded=true"></iframe>

You can add your document file URL like this

https://docs.google./viewer?url=<url for your file>&embedded=true

Here will be your file url <url for your file>

You have another way to view the .pdf/ .doc/.docx /.txt etc like google iframe system of Microsoft Document viwer webapp.

You can use it like this.

<iframe src='https://view.officeapps.live./op/embed.aspx?src=http://writing.engr.psu.edu/workbooks/formal_report_template.doc' width='80%' height='800px' frameborder='0'></iframe>

<iframe src='https://view.officeapps.live./op/embed.aspx?src=http://writing.engr.psu.edu/workbooks/formal_report_template.doc' width='80%' height='800px' frameborder='0'></iframe>

A solution adapted from "How do I render a Word document (.doc, .docx) in the browser using JavaScript?".

This is an embedded Microsoft Office document, powered by Office Online.

embed.aspx?src=<your_will_be_your_document_file_url>' width='80%'

add your document file ur here <your_will_be_your_document_file_url>

I am developing a web application using Angular 7 and Java 8. I am uploading a file (pdf, docx, txt etc...), but the problem is that I can't open it in another page of the browser through a RESTful web service. I am getting the error 415 Unsupported Media Type. I have tried with the POST and GET method whitout any success. These are the snippets of the code, front-end and back-end:

Angular ponent (method called by a button passing the path + filename example : C/doc/foo.pdf)

download(doc) {     
     this.service.downloadFile(doc.path).subscribe(response => {
        if(response) {
           let blob = new Blob([response], { type: 'text/json; charset=utf-8' });
           const url= window.URL.createObjectURL(blob);
           window.open(url);
        }   
     });
 }

Angular service

downloadFile(path): Observable<Blob> {
    const url = '/download';
    return this.http.post<Blob>(url, path, { responseType: 'blob' as 'json' });
}

Java Controller

@PostMapping(value = "download", produces = { MediaType.APPLICATION_JSON_UTF8_VALUE })
@ResponseBody
public byte[] download(@RequestBody String path) {
    try {
        return this.provvedimentoService.getDownload(path);
    } catch (IOException | EgesException e) {
        e.printStackTrace();
        return null;
    }
}

Java Service

public byte[] getDownload(String pathFile) throws EgesException, IOException {
    Path path = Paths.get(pathFile);
    if(path.toFile().exists())
        return Files.readAllBytes(path);
    else
        throw new EgesException(EgesExceptionConstants.WARNING_ACT_NOTFOUND_EXCEPTION);
}

I am developing a web application using Angular 7 and Java 8. I am uploading a file (pdf, docx, txt etc...), but the problem is that I can't open it in another page of the browser through a RESTful web service. I am getting the error 415 Unsupported Media Type. I have tried with the POST and GET method whitout any success. These are the snippets of the code, front-end and back-end:

Angular ponent (method called by a button passing the path + filename example : C/doc/foo.pdf)

download(doc) {     
     this.service.downloadFile(doc.path).subscribe(response => {
        if(response) {
           let blob = new Blob([response], { type: 'text/json; charset=utf-8' });
           const url= window.URL.createObjectURL(blob);
           window.open(url);
        }   
     });
 }

Angular service

downloadFile(path): Observable<Blob> {
    const url = '/download';
    return this.http.post<Blob>(url, path, { responseType: 'blob' as 'json' });
}

Java Controller

@PostMapping(value = "download", produces = { MediaType.APPLICATION_JSON_UTF8_VALUE })
@ResponseBody
public byte[] download(@RequestBody String path) {
    try {
        return this.provvedimentoService.getDownload(path);
    } catch (IOException | EgesException e) {
        e.printStackTrace();
        return null;
    }
}

Java Service

public byte[] getDownload(String pathFile) throws EgesException, IOException {
    Path path = Paths.get(pathFile);
    if(path.toFile().exists())
        return Files.readAllBytes(path);
    else
        throw new EgesException(EgesExceptionConstants.WARNING_ACT_NOTFOUND_EXCEPTION);
}

• javascript
• java
• angular
• pdf
• ms-word

Share Improve this question Follow asked Mar 25, 2020 at 19:59 Frank PentangeliFrank Pentangeli 34622 gold badges66 silver badges2020 bronze badges 1

• You should change the produces mediatype to something else, eg application/octet-stream. – Mark Rotteveel Commented Mar 26, 2020 at 13:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

You can't. Browsers don't have any built-in way to view Word docs so unless the user has configured their browser to open it with some plugin (which 99% of the world hasn't done), the browser will prompt them to download the file.

No browsers currently have the code necessary to render Word Documents, and as far as I know, there are no client-side libraries that currently exist for rendering them either.

However, if you only need to display the Word Document, but don't need to edit it, you can use Google Documents' Viewer via an <iframe> to display a remotely hosted .pdf/ .doc/.docx /.txt etc

<iframe src="https://docs.google./gview?url=http://remote.url.tld/path/to/document.doc&embedded=true"></iframe>

Many people used this methods to view their documents file. you can check here:How to display a word document using fancybox

<iframe width="100%" height="300px" src="https://docs.google./gview?url=http://index-of.co.uk/Google/googlehacking.pdf&embedded=true"></iframe>

You can add your document file URL like this

https://docs.google./viewer?url=<url for your file>&embedded=true

Here will be your file url <url for your file>

You have another way to view the .pdf/ .doc/.docx /.txt etc like google iframe system of Microsoft Document viwer webapp.

You can use it like this.

<iframe src='https://view.officeapps.live./op/embed.aspx?src=http://writing.engr.psu.edu/workbooks/formal_report_template.doc' width='80%' height='800px' frameborder='0'></iframe>

<iframe src='https://view.officeapps.live./op/embed.aspx?src=http://writing.engr.psu.edu/workbooks/formal_report_template.doc' width='80%' height='800px' frameborder='0'></iframe>

A solution adapted from "How do I render a Word document (.doc, .docx) in the browser using JavaScript?".

This is an embedded Microsoft Office document, powered by Office Online.

embed.aspx?src=<your_will_be_your_document_file_url>' width='80%'

add your document file ur here <your_will_be_your_document_file_url>

本文标签：