CODEWITHSUNDEEP
angular
Haifeng Zhang
Haifeng Zhang

Reputation: 31915

How to preview files sitting on server before download? Got error: Not allowed to load local resource: blob

Update:

To be clear, we use <embed #reportPdf width="100%" height="800"> and 

this.pdf.nativeElement.src = this._window.URL.createObjectURL(this.re);

It works on Safari and Firefox, but when load on Chrome, it shows as below, then if we click open button, it throws error Not allowed to load local resource: blob enter image description here Original:

I am working on an Angular project and is requested to preview files before download from server.

Our back-end is Spring boot and now the download functionality is working properly but I don't know how to achieve preview.

Some thoughts: - access server file via URL, how to make it work? Do we need to configure on server side?

Front end:

download(sessionGuid: string) {
    return this.http.get(`${this.fileUrl}/files/${fileId}`, {
        headers: new HttpHeaders({
            'Content-Type': 'application/pdf'
        }),
        responseType: 'blob'
    });
}

Backend:

private void downloadFile(HttpServletResponse response, String fileFullName) throws IOException {
    File file = new File (fileFullName);
    if (file.exists()) {
        String mimeType = URLConnection.guessContentTypeFromName(file.getName());
        if (mimeType == null) {
            mimeType = "application/octet-stream";
        }
        response.setContentType(mimeType);
        response.setHeader("content-Disposition", String.format(DISP_TYPE+" filename=" + file.getName()));
        response.setContentLength((int) file.length());
        InputStream inputStream = new BufferedInputStream(new FileInputStream(file));
        FileCopyUtils.copy(inputStream, response.getOutputStream());
    }
    else {
        response.sendError(HttpServletResponse.SC_NOT_FOUND);
    }
}

Upvotes: 0

Views: 1446

Answers (1)

Aleksey Melnikov
Aleksey Melnikov

Reputation: 101

You should render your pdf file to image (e.g. first page). Then you can make preview via <img src="..."></img>

Upvotes: 1

Related Questions