Angular 13 - Retrieve a file from ByteArray information

Question

Angular 13 - Retrieve a file from ByteArray information

Upon receiving a byte[] file from the server containing the content of a file along with its name and content type, I have attempted to download the file using the following JavaScript code:

const link = document.createElement('a');
document.body.appendChild(link);
link.style.display = 'none';

const blobFile = new Blob([content], {type: 'text/plain'});
const url = window.URL.createObjectURL(blobFile);
link.href = url;
link.download = "test.txt";
link.click();
window.URL.revokeObjectURL(url);

Unfortunately, this method downloads a text file with binary content. How can I convert the binary data to the appropriate file type on the client side using JavaScript or Typescript? Thank you for your help!

javascript angular typescript file download

Answer 1

Answer №1

If you want to save files in your web application, consider using the file-saver library

import { saveAs } from 'file-saver';

Create a new Blob object containing the file content:
const file = new Blob([content], {type: 'text/plain'});

Save the file using FileSaver.saveAs():
FileSaver.saveAs(file, "test.txt");

Answer 2

If you want to save files in your web application, consider using the file-saver library

import { saveAs } from 'file-saver';

Create a new Blob object containing the file content:
const file = new Blob([content], {type: 'text/plain'});

Save the file using FileSaver.saveAs():
FileSaver.saveAs(file, "test.txt");

Answer 3

Answer №2

storeBytesAsFile(data, fileType) {
  var blob = new Blob([data],{type:fileType});
  var downloadLink = document.createElement('a');
  downloadLink.href = window.URL.createObjectURL(blob);
  downloadLink.download = "myFile";
  downloadLink.click();
}

Answer 4

storeBytesAsFile(data, fileType) {
  var blob = new Blob([data],{type:fileType});
  var downloadLink = document.createElement('a');
  downloadLink.href = window.URL.createObjectURL(blob);
  downloadLink.download = "myFile";
  downloadLink.click();
}

Answer 5

Answer №3

 C# .NET:
 public byte[] DocumentContent { get; set; }

Angular: 
DocumentContent: ArrayBuffer;

TypeScript: 
var content = this.base64ToArrayBuffer(response.DocumentContent);
        var blob = new Blob([content], { type: response.ContentType });

base64ToArrayBuffer(base64: any): ArrayBuffer {
    var binaryString = window.atob(base64);
    var length = binaryString.length;
    var bytes = new Uint8Array(length);
    for (var index = 0; index < length; index++) {
      bytes[index] = binaryString.charCodeAt(index);
    }
    return bytes.buffer;
  }

Answer 6

 C# .NET:
 public byte[] DocumentContent { get; set; }

Angular: 
DocumentContent: ArrayBuffer;

TypeScript: 
var content = this.base64ToArrayBuffer(response.DocumentContent);
        var blob = new Blob([content], { type: response.ContentType });

base64ToArrayBuffer(base64: any): ArrayBuffer {
    var binaryString = window.atob(base64);
    var length = binaryString.length;
    var bytes = new Uint8Array(length);
    for (var index = 0; index < length; index++) {
      bytes[index] = binaryString.charCodeAt(index);
    }
    return bytes.buffer;
  }

Angular 13 - Retrieve a file from ByteArray information

Answer №1

Answer №2

Answer №3

Similar questions

Creating a URL using input fields with JavaScript or jQuery

ajax continues to repeatedly post old values

Tips for managing the response from a POST request using jQuery

The Angular Google Maps Module fails to initialize

Strategies for transferring data between controllers and configuration files in AngularJS

Adjusting the position of the target div using bootstrap

Anticipating the resolution of one promise before tackling the next in Angular.js

Leveraging the 'passport.isAuthenticated()' method for evaluating numerous user roles within a Node.js application

How to activate service worker in Angular 4 web app

When using $.ajax, an Object Object is returned

Highlight and extract the text from ag-grid

Tips for accessing touch events within the parent component's area in React Native

Incorporate an HTML file into a div element in Angular

Discovering the HTTP status code from RNWebView

Where can the body of this function be located in Typescript and do the generics serve a practical purpose?

I encountered an issue with my shopping cart while using ReactJS

Mastering the alignment of Material-UI Menu items

Encountering an ETIMEDOUT error while sending out large (10k) post requests with axios.all in a Node

Experiencing a Problem with Vue Form Input Bindings when Using Conditional Binding

What is the correct way to add properties to an interface in TypeScript?