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")
Related
Im calling request from google workspace file with gapi using this code
gapi.client.drive.files.export({
fileId: fileId,
mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
})
from that code i get response back of base64 string to convert as a blob but when i open file in google docs or msword file is corrupt and not working but if i change mimeType into application/pdf it working
same thing also happen in if i request file with application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
am i doing something wrong here or i there is other way to getting file workspace
md5Checksum is not available
As mentioned in the official documentation for files.get:
Response
By default, this responds with a Files resource in the response body. If you provide the URL parameter alt=media, then the response includes the file contents in the response body. Downloading content with alt=media only works if the file is stored in Drive. To download Google Docs, Sheets, and Slides use files.export instead. For further information on downloading files, refer to Download files.
Finally i found solution for this issue according to this official documentation we have two type we can download from google drive.
here my code how i request for file
const res = await drive
.files
.export({
fileId: fileId,
mimeType: yourMimeTarget
})
.then(res => res)
const blob_file = fetch(`data:${yourMimeTarget};base64,${btoa(res.body)}`)
.then(res => res.blob())
so after you fetch google workspace file you will get base64 string than you can convert it into blob
I have been trying to upload PDF file from phone storage to Firebase. Its working fine when I use react-native-document-picker to select a pdf file, which returns the path of the file something like content://com.android.externalstorage.documents/document/primary%3Adocs%2F' +'<filename>'.pdf'
which is then passed to fetch
const response = await fetch(path);
blob = await response.blob();
and then the blob is uploaded to Firebase.
But the problem is that I don't want to pick a document every time. if I don't use react-native-document-picker and just curate the exact path return by the module. it gives network error when passed to fetch, so unable to create a blob.
I also tried react-native-fs but couldn't figure out how to create a blob of PDF residing in emulated storage.
I am currently using RecorderJS and need to send a .wav file to the backend. the API is quite limited in documentation so I am struggling to figure out how to send the .wav file through my axios.post(...).
I am able to download the .wav file with
Recorder.download(theblob, 'audio.wav');
this downloads a .wav file which I can play through itunes so it is the right format. I now need to figure out how to save this in a variable in order to post it through axios. Also, what should i use for me headers, .. ect?
Looking for any kind of javascript solution to this. I just need to send the exact downloaded file to my backend. Thanks!
The download method stores the file somewhere on your disk. I believe javascript cannot traverse your computer's path and read files for security reasons. I'm not sure if recorder-js offers storing it in a variable "out of the box", so you may want to get that handled first.
For your second part of the question:
This should work for posting it to the back-end:
let data = new FormData();
data.append('wavfile', file, file.name);
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
axios.post('/api/recorderfiles', data, config)
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'});
I need to read excel file data when upload the file .
Is there any way that can use html5 to read excel file data when file uploading in client side??
heard about
var reader = new FileReader();
any way that we can use this
Referring to #mituw16 comment on the question, take a look at the following question:
How to parse Excel file in Javascript/HTML5
As a seperate response to work from, I would suggest using a plugin like:
https://github.com/SheetJS/js-xlsx
To iterate through the spreadsheet and save the information in your database.