CODEWITHSUNDEEP
javascriptjavaangularpdfms-word
Frank Pentangeli
Frank Pentangeli

Reputation: 346

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

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 component (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);
}

Upvotes: 2

Views: 18437

Answers (1)

Sazid Hasan Milon
Sazid Hasan Milon

Reputation: 21

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.com/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.com/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.com/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.com/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.com/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>

Upvotes: 1

Related Questions