I have a class that can be serialized into a json file I want to allow users to download the json file.
How can I generate a file in memory and then have the browser download it ??
I guess I need to have a stream of some sort, but how do I make it download afterward?
I would love to avoid JS since I have no knowledge about it
Heres how I did it in my project with JS Interop and System.Text.Json. This code has not been used by me in a couple of months though and I can't test it right now. But it did work when I added it.
Blazor code:
#using System.Text.Json
#using Microsoft.JSInterop
#inject IJSRuntime JSRuntime
...
async Task downloadObject(object objectToSave, string fileName)
{
var obj = JsonSerializer.Serialize(objectToSave);
var fileStream = new MemoryStream(new UTF8Encoding(true).GetBytes(obj));
using var streamRef = new DotNetStreamReference(stream: fileStream);
await JSRuntime.InvokeVoidAsync("downloadFileFromStream", fileName, streamRef);
}
JavaScript:
window.downloadFileFromStream = async (fileName, contentStreamReference) => {
const arrayBuffer = await contentStreamReference.arrayBuffer();
const blob = new Blob([arrayBuffer]);
const url = URL.createObjectURL(blob);
const anchorElement = document.createElement('a');
anchorElement.href = url;
if (fileName) {
anchorElement.download = fileName;
}
anchorElement.click();
anchorElement.remove();
URL.revokeObjectURL(url);
}
Related
I've been having some problems when I try to convert a byte[] coming from C# into a pdf file using Angular.
When I perform the conversion the file is created but is corrupted and it can't be opened "We can't open this file", the file content is just basic text "Hello world".
Please let me know if you have any answer to this problem, the code I am using is below and I also try using "import { saveAs } from 'file-saver';" but it didn't work.
// THE WEB API CONTROLLER THAT GETS THE PDF BYTE ARRAY
[HttpPost("CreatePDF")]
public async Task<HttpResponseMessage> CreatePDF([FromBody] PDFContent pdfContent)
{
byte[] pdf = await _pdfGenerator.GeneratePDF(pdfContent.HtmlContent);
var result = new HttpResponseMessage(HttpStatusCode.OK);
result.Content = new ByteArrayContent(pdf);
result.Content.Headers.ContentType =
new MediaTypeHeaderValue("application/octet-stream");
return result;
}
// UI SERVICE LAYER THAT CALLS THE SERVER SIDE
createPdfReport(pdfContent: PDFContent): Observable<any> {
return this.restApi.create("CreatePDF",pdfContent).pipe(
tap(pdf =>
console.log('pdf = ' + pdf)
));
}
// THE COMPONENT THAT CALLS THE SERVICE LAYER AND WAITS FOR THE RESPONSE
this.historyService.createPdfReport(pdfContent).subscribe(data => {
var file = new Blob(data, { type: 'application/octet-stream' })
var fileURL = URL.createObjectURL(data);
const link = document.createElement('a');
link.setAttribute('target', '_blank');
link.setAttribute('href', fileURL);
link.setAttribute('download', `file.pdf`);
document.body.appendChild(link);
link.click();
link.remove();
});
}
This is the response I get in Angular after the controller returns the byte[]:
I'm trying to download a PDF file from blazor sent by my WebAPI as byte[] (byteArray).
I know that my PDF is working because when I send it as filestreamResult and retrieve it directly from my WebAPI (using swagger for example), I get the correct PDF file.
My WebAPI:
var response = await GetResponse(new Query(request.AnalysisDate), ct);
string html = await _templateService.PerformanceReport(response);
MemoryStream stream = _pdfService.GeneratePdf(html);
return await stream.ToArray(); // as byte[]
Blazor Side:
var bytes = await _http.GetByteArrayAsync(endpoint);
await JsRuntime.InvokeVoidAsync("BlazorDownloadFile", "file.pdf", "application/pdf", bytes);
JS:
function BlazorDownloadFile(filename, contentType, content) {
// Create the URL
const file = new File([content], filename, { type: contentType });
const exportUrl = URL.createObjectURL(file);
// Create the <a> element and click on it
const a = document.createElement("a");
document.body.appendChild(a);
a.href = exportUrl;
a.download = filename;
a.target = "_self";
a.click();
// We don't need to keep the object url, let's release the memory
// On Safari it seems you need to comment this line... (please let me know if you know why)
URL.revokeObjectURL(exportUrl);
}
I Correctly download a PDF file named file.pdf but it looks corrupted.
Is this the correct approach with .NET 6?
Should I send a FileStreamResult from the Web API (I Like the fact that I can get the file directly from swagger)?
I can't really find a good example for blazor on how to do this. Any help would be appreciated.
I am using another aproach. I send base64String. I convert byte array to base64 string then i pass the string to javascript function
Server side call:
js.InvokeVoidAsync("jsSaveAsFile",
filename,
Convert.ToBase64String(GetFileByteArrayFunction())
);
javascript function:
function jsSaveAsFile(filename, byteBase64) {
var link = document.createElement('a');
link.download = filename;
link.href = "data:application/octet-stream;base64," + byteBase64;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);}
js -> using Microsoft.JSInterop.
You should send your file like this:
app.MapGet("/download", () =>
{
//...
Results.File("myfile.pdf");
});
there are some overloads of this method you can pick up the one that fit your requirements.
I upload attachments to an Azure Blob storage. I also create a SAS-Token when uploading; I retrieve the unique URL, send it to the browser where it is opened immediatly.
When I do this I often (but not always) retrieve a 404 that this resource does not exist. When refreshing the page just a few seconds later it is retrieved correctly.
So it seems that I am "too fast" after uploading the attachment. Is there a way to wait until Azure is ready to serve the attachment? I would have expected awaiting the call would be sufficient to achieve this.
public async void UploadFile(string filename, byte[] filecontent)
{
var containerClient = _blobServiceclient.GetBlobContainerClient("attachments");
var blobClient = containerClient.GetBlobClient(filename);
using (var stream = new MemoryStream(filecontent))
{
await blobClient.UploadAsync(stream, new BlobHttpHeaders { ContentType = GetContentTypeByFilename(filename) });
}
}
public async Task<string> GetLinkForFile(string filename)
{
var containerClient = _blobServiceclient.GetBlobContainerClient("attachments");
var sasBuilder = new BlobSasBuilder()
{
BlobContainerName = containerName,
BlobName = filename,
Resource = "b",
StartsOn = DateTime.UtcNow.AddMinutes(-1),
ExpiresOn = DateTime.UtcNow.AddMinutes(5),
};
// Specify read permissions
sasBuilder.SetPermissions(BlobSasPermissions.Read);
var credentials = new StorageSharedKeyCredential(_blobServiceclient.AccountName, _accountKey);
var sasToken = sasBuilder.ToSasQueryParameters(credentials);
// Construct the full URI, including the SAS token.
UriBuilder fullUri = new UriBuilder()
{
Scheme = "https",
Host = string.Format("{0}.blob.core.windows.net", _blobServiceclient.AccountName),
Path = string.Format("{0}/{1}", containerName, filename),
Query = sasToken.ToString()
};
return fullUri.ToString();
}
public async Task<Document> GetInvoice(byte[] invoiceContent, string invoiceFilename)
{
string filePath = await GetLinkForFile(invoiceFilename);
UploadFile(invoiceFilename, file);
return new Document()
{
Url = filePath
};
}
The method GetInvoice is called by REST and the response (containing the URL) returned to the browser where it is opened.
If you notice, you're not waiting for the upload operation to finish here:
_azureStorageRepository.UploadFile(invoiceFilename, file);
Please change this to:
await _azureStorageRepository.UploadFile(invoiceFilename, file);
And you should not see the 404 error. Azure Blob Storage is strongly consistent.
Also, change the UploadFile method from public async void UploadFile to public async Task UploadFile as mentioned by #Fildor in the comments.
In Angular I'm trying to download an excel file from my Web API Server
If I call my API from an <a> component just like this:
Download
The file downloads fine and without handling the response I get the desired behaviour:
How can I get the same result making the request from my Angular DownloadService and handling the result on .subscribe()?
this.downloadService.download()
.subscribe(file => {/*What to put here for file downloading as above*/});
Note that the server creates the response like this:
byte[] b = File.ReadAllBytes(HttpRuntime.AppDomainAppPath + "/files/" + "file.xlsx");
var dataStream = new MemoryStream(b);
HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
response.Content = new StreamContent(dataStream);
response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
response.Content.Headers.ContentDisposition.FileName = "File";
response.Content.Headers.ContentType = new MediaTypeHeaderValue(MimeMapping.GetMimeMapping("file.xlsx"));
return response;
Thanks in advance! :)
try this work around:
.subscribe(file =>
{
const a = document.createElement('a');
a.setAttribute('type', 'hidden');
a.href = URL.createObjectURL(file.data);
a.download = fileName + '.xlsx';
a.click();
a.remove();
});
The comment above should work, but here is another way
.subscribe(file) {
const blob = new Blob([file], { type: 'text/csv' }); // you can change the type
const url= window.URL.createObjectURL(blob);
window.open(url);
}
You can add js-file-download library which supports all browsers
npm install js-file-download --save
you can use window.URL.createObjectURL(blob); but IE does not support it...
here is my code for downloading Excel files from the Backend
import axios from 'axios';
import * as FileSaver from 'file-saver';
const result: any = await axios.create().post("http://localhost:8080/file",
{
responseType: "arraybuffer",
});
let blob = new Blob([result.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
FileSaver.saveAs(blob, "export.xlsx");
I have several export routes on an asp.net core application, but all of them are accessed by a GET request, eg: /api/{projectid}/{parameter}
These requests are generating xlsx files and sending them to the client. Now I have a similar request but I have to pass a long array to the method, so I would like to make it into a POST method and send the array (and other parameters) in the http body.
I get the correct response from the server (an array buffer starting with PK...) but I can't tell angular to save it as a file as I did with the similar GET requests. If I rewrite this back to start a GET request it works fine. What am I doing wrong?
Controller method:
[HttpPost("[action]")]
public IActionResult Export([FromBody] DistributionExportPostModel model)
{
var project = _ctx.Projects.FirstOrDefault(x=>x.Id == model.ProjectId);
byte[] xlsx = createXlsxFile(project, model.Selection, model.ComparisonBase);
var mimeType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
var fileName = $"TaskExport-"+project.Name+"-"+DateTime.Now.ToString("yyyyMMddHHmmss")+".xlsx";
return File(xlsx, mimeType, fileName);
}
Angular provider method:
export(projectid:string, selection:string[], comparisonBase:string):Promise<any[]> {
//let headers:Headers = new Headers();
//headers.append('Accept', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
//let params: URLSearchParams = new URLSearchParams();
let requestOptions = new RequestOptions();
requestOptions.responseType = ResponseContentType.ArrayBuffer;
return new Promise<any[]>((resolve) =>
this.http.post('/api/Distribution/Export', {
//'+projectid+'/'+comparisonBase+'/'+selection.join(','),
'ProjectId': projectid,
'Selection': selection,
'ComparisonBase': comparisonBase
}, requestOptions).subscribe((res) => {
window.open(res.url, '_blank');
resolve();
})
);
}
Below should work on Chrome.
var blob = new Blob(yourData, {type: "octet/stream"});
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = name;
a.click();
window.URL.revokeObjectURL(url);
For IE and Firefox, try this:
window.navigator.msSaveBlob(blob, filename);
You may need to add the anchor to the DOM before clicking it.