I'm trying to download a xlsx file which is generated in the java backend from the angular frontend and I'm getting file as an attachment with Content-Disposition header and I'm able to download the file with the below js code, but when I try to open it, it's always corrupted
var data = response; //from server
var blob = new Blob([data], { type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml;charset=UTF-8"});
var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'filname.xlsx';
link.click();
If I console log the server response, here is what I found
Edit:
When I try to open the downloaded file, see below image
Can someone help me on this?
I had this same issue with AngularJS 1.6.1. When I called my HTTP GET service from the browser or from window.open("url"), the xlsx file was downloaded perfectly: 304628 bytes. However, the response.data provided by AngularJS instead had 289414 bytes and the Blob wrapper had 550963 bytes, which is what is downloaded as a corrupted file. This same behavior occurred if I return the xlsx in a zip.
I solved this by setting the XMLHttpRequest.responseType property as such:
$http.get(url, {responseType:'arraybuffer'});
Related
I have been working with sheetjs for several days and I cannot download the file that it sends me, the library cannot process it and it blocks my entire page. What should I do?
this is the file that the backend sends me
this is the code i was using
axios.toExcel(datos).then((res)=>{
const blob = new Blob([res])
let a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = 'demo.xlsx'
a.click()
})
How can I download an excel file with sheetjs that the backend sends me?
I have a scenario where the backend api(SPRING BOOT) is returning response as an excel file and i have to download it.
I have been trying to save the file using File saver library but could not reach the solution.
please help me on this
const blob = new Blob([response.data], {type:'application/vnd.openxmlformats-
officedocument.spreadsheetml.sheet'})
console.log(blob)
[![this is the response i am getting from api][1]][1]FileSaver.saveAs(blob, "tickets.xlsx")
I am getting json response against an endpoint. I need to be able to download that as a json file. Which I am able to do. This downloaded json file has to be uploaded against some other endpoint.
PROBLEM
I have tested both the download & upload API's using Postman. File downloaded using Postman when uploaded gives me the expected response. Which means API is working fine.
source.js
const filename = response.headers["content-disposition"].split(
"filename="
)[1];
const data = filename.endsWith(".json")
? JSON.stringify(response.data)
: response.data;
const url = window.URL.createObjectURL(new Blob([data]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", filename);
document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link);
But the file downloaded using the front-end is when uploaded doesn't work as expected. Which means that this method of downloading the file is somehow not downloading it correctly.
Am I downloading it correctly?
There is an Angular 6 app having a feature to download pdf files. It uses REST API from another Spring Boot application to download files.
The requirement is that i need to open pdf file in new tab and while saving it shall have a meaningful name.
I am able to get the file downloaded and open in new tab too. But while saving the file, it takes name from the url.
I tried by opening the file directly from REST API in browser and save it as well as getting blob and open in new window from angular app. Both open the files but while saving they take name from URL.
Angular - Open blob in new window
blob:https://defg.com/89a0396e-994b-43d0-b3e3-aaa95d47db9f
If i try to download opened file, it suggests to save with name
89a0396e-994b-43d0-b3e3-aaa95d47db9f.pdf
Is there a way to pass or set filename in below approach?
var fileURL = window.URL.createObjectURL(file);
window.open(fileURL, "_blank");
API - Takes Encrypted name
https://abcd.com/ws/fileDownload/85C1E5010AFAE309E89534FAC594C9110D74FED4DF78AAA8EE199C78B570FABF8BC6640F0563778DD963
If i try to download opened file, it suggests to save with correct name for first time, shows string from url as name from second attempt, 85C1E5010AFAE309E89534FAC594C9110D74FED4DF78AAA8EE199C78B570FABF8BC6640F0563778DD963.pdf
Inspected response, headers look good,
Content-Disposition: inline; filename= "test.pdf"
Any suggestions would be helpful. Thanks in advance.
You could use file-saver library as follow:
import { saveAs } from 'file-saver';
...
awesomeDownloader(url: string, fileName: string) {
const blobFile = functionsThatGetsTheBlob(url);
saveAs(blobFile, fileName);
}
...
I'm writing a Google Chrome extension. I have URL of a binary file on a remote server. I want to post that file to other server. So related function should look like this.
function postFileToExampleCom(fileUrl) {
var file = ???; // Blob with data from file located at fileUrl
var form = new FormData();
form.append('file', file);
var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/post/', true);
request.send(form);
}
FormData.append() expects second argument to be a Blob object containing file data. What is the best way to get it? File is likely to be an image that is already loaded in active tab so it's preferable to use cache and not to download this file again.
UPD: I've tried downloading file with another XMLHttpRequest setting responseType = 'blob' but strangely it returns empty response.
".. File is likely to be an image that is already loaded in active tab so it's preferable to use cache and not to download this file again."
If you saved the file locally (e.g. using localStorage or fileAPI) - then you should make sure you reading it and getting a file back and not a serialized version of the data.
I would debug the line of 'var file=???' and see what is the obj that you getting there.
It's good practice to have these 3 functions for your 'request':
onload, onerror and onprogress.
I hope it helps.