I think the title is weird but just says all i want.
I got the following API call
this.myAPI.get("/endpoint/toget/pdf/")
.then(response => {
}, function(error) {
});
The API response with a PDF file not a link but a PDF file. How do i capture that file and allow the user to ng-click and open the file?
Ideas.. Anyone?
Okay if you get a base64 string the following works perfect but sadly and obviously not in IE.
window.open("data:application/pdf;base64," + response.data.content);
Related
I have ASP.NET Core MVC back-end api. One controller returns File from server. Is there a way to make request to api route by [href] attribute of <a> tag? Looks like it tries to call React route but not make a request to server.
Also I made AJAX call to that controller and got back file as a string (screenshot is attached). Why is it a string, shouldn.t it be a byte array? How to build back file from that string? (it's a .pdf file). I have an empty PDF if use JavaScript new File([], 'name', {options}).
ASP.NET Core controller returns PDF this way:
return PhysicalFile(Path.GetFullPath(relativePath), "application/pdf", reportName);
In React I receive it as a string this way:
let stringPDFBinary = await ReportService.getReport(id, reportFileName)
I just need to download file from api by any way.
So, the answer is here: PDF is blank when downloading using javascript
The same problem. Let it be one more topic, easier to find for others. The AJAX response is encoded string. In request config set 'responseType = 'arraybuffer'' somehow and receiving pdf will not be blank. Solved.
I Just copied and pasted from the code source. The problem seems to be the same that i had:
Asp net controller:
[HttpGet]
[Route("File")]
[AllowAnonymous]
public IActionResult GetFile(string key)
{
var file = (FileCacheValue)_fileCache.Cache[key.Replace(" ", "+")];
if (file == null)
return NotFound();
Response.Headers["content-disposition"] = $"inline;filename={file.Name}.pdf";
return File(file.Data, "application/pdf");
}
In this case comes from a cache system. The data is a byte array.
Front-end React:
const onClick = () =>
{
window.open(pdfByteArray, '_blank', 'fullscreen=yes');
}
Exactly what i have. I just put the data on a new window and open the pdf.
The Ajax part is straight forward, get the value from the response and set it on a variable
I am trying to download a server side generated pdf file in client, which i get with axios and save it in redux and using FileSaver to download it.
const getTicketPdf = ({ userID, ticketID }) =>
requestApi(`/users/${userID}/tickets/${ticketID}/pdf`, {
method: 'get',
});
requestApi gets me all neccessary headers so that i can download the file.
the data is then stored in redux like this:
data: "%PDF-1.4\n3 0 obj\n<</Type /Page\n/Parent 1 0 R\n/MediaBox [0 0 595.00 842.00]\n/Resources 2 0 R\n/Contents 4 0 R>>\nendobj\n4 0 obj\n<</Filter /FlateDecode /Length 64>>\nstream\nx�3R��2�35W(�*T0P�R0T(\u0007�Y#�\u000e��#Q…"
i call it in render with:
<div>
<button onClick={ () => this.getPdf(ticket) }>PDF</button>
</div>
getPdf = ticket => {
const blob = new Blob([ticket]);
FileSaver.saveAs(blob, 'Ticket.pdf');
}
I am always getting the following error:
TypeError: Cannot read property 'saveAs' of undefined
i tried also to set
responseType: 'blob'
but this doesn't help either.
Next thing I testet was with react-pdf library, where I managed to display pdf in Component, but i cant print it. User should only habe to save it and then print it locally (or at least show it in separate tab as PDF, which i tried with window.open() as base64 encoded string).
How can I download a server side generated PDF otherwise? Are there any better ways?
Unfortunately I have to set HTTP Headers in order to get that file.
Thanks in advance.
The error stems from the fact that there is no FileSaver object (or rather, it's non-standard).
It seems to be polyfilled by this third-party library: https://github.com/eligrey/FileSaver.js
The error you are seeing is caused by a reference to an undefined variable FileSaver - I guess that you are using FileSaver.js, and need to fix the import. You should also bear in mind that FileSaver is deprecated in favour of the download attribute. See this answer for details on how to use it.
Either way, in the interests of keeping your store light, you should save a reference to the PDF in your Redux store, rather than the string itself.
I am trying to save a variable's data into a text file and update the file every time the variable changes. I found solutions in Node.js and vanilla JavaScript but I cannot find a particular solution in React.js.
Actually I am trying to store Facebook Long Live Access Token in to a text file and would like to use it in the future and when I try importing 'fs' and implementing createFile and appendFile methods I get an error saying Method doesn't exist.
Please help me out. Here is the code below
window.FB.getLoginStatus((resp) => {
if (resp.status === 'connected') {
const accessToken = resp.authResponse.accessToken;
try {
axios.get(`https://graph.facebook.com/oauth/access_token?client_id=CLIENT_id&client_secret=CLIENT_SECRET&grant_type=fb_exchange_token&fb_exchange_token=${accessToken}`)
.then((response) => {
console.log("Long Live Access Token " + response.data.access_token + " expires in " + response.data.expires_in);
let longLiveAccessToken = response.data.access_token;
let expiresIn = response.data.expires_in;
})
.catch((error) => {
console.log(error);
});
}
catch (e) {
console.log(e.description);
}
}
});
React is a frontend library. It's supposed to be executed in the browser, which for security reasons does not have access to the file system. You can make React render in the server, but the example code you're showing is clearly frontend code, it uses the window object. It doesn't even include anything React-related at first sight: it mainly consists of an Ajax call to Facebook made via Axios library.
So your remaining options are basically these:
Create a text file and let the user download it.
Save the file content in local storage for later access from the same browser.
Save the contents in online storage (which could also be localhost).
Can you precise if any of these methods would fit your needs, so I can explain it further with sample code if needed?
I am using react to create front-end.
I have a download button which will trigger an action.
The action will use axios.post to call the server which will return a file.
The axios.response is something like this
resopnse.data: 'binary data of image file'
response.headers: {
cache-control:"public, max-age=0"
content-disposition:"attachment; filename="test.jpg""
content-type:"image/jpeg"
last-modified:"Mon, 22 Jan 2018 18:49:27 GMT"
}
response.data is tested using postman which converts the response to the correct image.
Now I am going to use eligrey's filesaver to save it.
This is what I have.
let fileName = getFileNameFromContentDisposition(response.headers);
let blob = new Blob([response.data], {type: response.headers["content-type"]});
fileSaver.saveAs(blob, fileName, true);
The code is tested using Chrome. The code will create a jpeg file, but it cannot be opened.
I played around with solutions provided for similar questions in GitHub and this website. But none of it is working.
I believe I am missing trivial setting to make this work.
The problem is not the library.
axios is the cause. The response from axios is already converted to json. So the binary data lost some information.
Even when the blob string fromaxios's reply is converted back to blob. It is a corrupted blob.
The workaround is to use fetch, and convert the response to response.blob().
I want to download file that can be in any format viz. pdf, jpeg, png, xlsx, csv etc. The download API on backend using pyramid framework is sending FileResponse as below:
def delivery_item_download_view(request, *args, **kw):
context = request.context
item_row = context.item_row
if item_row and item_row["deleted_at"] is None:
print(request.upload_dir+'/'+item_row["file_name"]+'.'+item_row["file_extension"])
response = FileResponse(
request.upload_dir+'/'+item_row["file_name"]+'.'+item_row["file_extension"],
request=request,
)
response.headers["attachment"] = item_row["name"];
return response
This, when executed using POSTMAN works as expected giving file as output. However,when tried implementing same using ReactJS, it's not working as expected. My client-code is as below:
onDownloadItem= (item) => {
console.log("item id is:", item.item_id)
var apiBaseUrl = "https://dev.incodax.com/api/deliveries_items/"+ item.item_id+ "/download";
fetch(apiBaseUrl, {
method: "GET",
}).then((res) => {
fileDownload(res,item.file_name)
console.log(res)
})
}
This fileDownload function simply downloading file but with no content inside. In downloaded file I could see something like:
[object Response]
I am getting 200 response from server. So I dont't think there is any issue with server side code. How can I handle it on client?
Thanks in advance
Will it suit you if you just redirected user to link to file? Browser will automatically handle it and download it.
The issue is in your fileDownload function which you do not post here. It's not clear what the first parameter is supposed to be but likely it is not the response object. Likely you at least need to pull the body out of the response and save that! The response body can be converted to a buffer object which could work (again it depends on what fileDownload is expecting):
res.arrayBuffer().then(buffer => {
fileDownload(buffer, item.file_name);
});