Instead of being viewed in the browser, the CSV file is being downloaded

I'm currently using Jhipster and have a function generated by Jhipster to open files in the browser. However, I'm facing an issue with this function when it comes to opening CSV files - instead of opening in the browser, they are being downloaded. This problem does not occur with other file types like XML.

Below is the code snippet for reference:

  openFile(data: string, contentType: string | null | undefined): void {
    contentType = contentType ?? '';

    const byteCharacters = atob(data);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    const blob = new Blob([byteArray], {
      type: contentType,
    });
    const fileURL = window.URL.createObjectURL(blob);
    const win = window.open(fileURL);
    win!.onload = function () {
      URL.revokeObjectURL(fileURL);
    };
  }

If anyone has any insights or solutions to this problem, it would be greatly appreciated. Thank you!

Answer №1

To address the issue, I implemented a fresh route called /csv-view (which is triggered when clicking the button) and converted the data into an array of strings before displaying it as an HTML table.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the mechanics behind optional chaining, known as the Elvis operator, in TypeScript. How does this feature operate within the

Can someone explain the concept of optional chaining (Elvis operator) in TypeScript and how it can be used effectively? public static getName(user: IUser){ if(user.firstName != null && user.firstName != ""){ return user.firstName; } ...

Webpack and typescript are encountering a critical dependency issue where the require function is being utilized in a manner that prevents static extraction of dependencies

Having recently started diving into typescript and webpack programming, I must admit that my background in this area is limited. Despite searching through similar questions on Stack Overflow, none of the solutions provided so far have resolved my issue: I ...

After 15 minutes of inactivity in the Angular project, the JWT (Json Web Token) token expires leading to the need for renewal or refresh

I have integrated a JWT token authentication service in my Angular project with an ASP.Net Core API as the backend. Here's how I set it up: Startup.cs public void ConfigureServices(IServiceCollection services) { services.AddAuthentication( ...

Unable to convert JSON data to char array due to a NumberFormatException while using editText

I am attempting to parse JSON on Android, and after parsing the JSON, I want to convert the inputted ID in Edittext to a char array. However, I am encountering a NumberFormatException. I don't think this is a silly question, but where could the prob ...

Trouble navigating through an index of elastic data? Learn how to smoothly scroll with Typescript in conjunction with

I'm currently using the JavaScript client for Elasticsearch to index and search my data, but I've encountered an issue with using the scroll method. Although I can't seem to set the correct index, I am confident in my technique because I am ...

Encountering an issue while attempting to input a URL into the Iframe Src in Angular 2

When I click to dynamically add a URL into an iframe src, I encounter the following error message: Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'SafeValue%20must%20use%20%5Bproperty%5D' To ensure the safety of the ...

Neither Output nor EventEmitter are transmitting data

I am struggling to pass data from my child component to my parent component using the Output() and EventEmitter methods. Despite the fact that the emitter function in the child component is being called, it seems like no data is actually being sent through ...

Having issues with pageLoadTimeout function not functioning properly in Selenium framework

I have been trying to implement the following code using Selenium in Java. Even though I have set a pageLoadTimeout of 4 seconds, the driver still waits for the entire page to finish loading. Any suggestions on how to fix this? System.setProperty("webdr ...

Instructions for invoking an extra npm start script within Angular 2 cli configuration

Currently working on two different projects: Main angular 2 project which is launched using the cli/ng serve and runs on localhost:4200. Also working on Reveal.js, started using npm start and runs on localhost:8000 I'm interested in a way to stream ...

Utilize an enum to serve as a blueprint for generating a fresh object?

I've defined an enum as shown below: export enum TableViewTypes { user = 'users', pitching = 'pitching', milestones = 'milestones', mediaList = 'mediaList', contacts = 'contacts' } ...

I have just developed a Java test script using Eclipse, and now I am looking to execute it on a headless Linux CentOS VM. How

Looking for guidance on running successful test scripts created using Eclipse on a Windows system in a Linux VM via SSH. Despite numerous attempts following online instructions, I have not been able to achieve success. It seems changes might be needed in t ...

angular primeng table has a checkbox to select all checkboxes

Is there a way to check all checkboxes in a table when the checkbox in the table header is clicked? I am currently utilizing angular 12 and primeNG table for this functionality. <p-table styleClass="text-sm" [value]="value" [loading] ...

The initial setting of [opened]="true" causes an issue with the Angular Material date range picker

Recently, we completed the upgrade of our app from Angular 14 to 15.2.9, which includes Angular Material. The migration process went smoothly, and now our app is compiling and running without any errors. However, we encountered an issue with the mat-date-r ...

What are the steps for creating a TypeScript version of a custom CKEditor5 build?

Currently, I am in the process of creating a personalized version of CKEditor5. By following the guidelines provided in the official documentation, I successfully obtained ckeditor.js. My goal now is to produce a typescript file (ckeditor.ts or ckeditor.d ...

When using AngularJS 2, the class identity is lost when resolving a Promise during fetching

SUMMARY: I'm encountering an issue where I am fetching Object instances instead of Org instances from my data in Angular 2. Is there a way to retrieve Org objects directly or is this the expected behavior? DETAILS: In my Angular 2 project, I have mod ...

Error message: Typescript class unable to access methods because of undefined properties (TypeError: Cannot read properties of undefined (reading 'method_name'))

During the compilation process, everything goes smoothly with no errors. However, when I try to call the method in the controller, an error occurs. It seems that some class methods are missing during the compilation phase. If you require more information ...

The 'xxx' type does not have an index signature, so the element is implicitly assigned an 'any' type

I'm currently facing an issue with TypeScript. The error message I'm encountering is related to the following section of code: The Interface: export default interface IUser { username: string; email?: string; isActive: boolean; group: s ...

Challenge with JWT Tokens

In my application, I am utilizing a Node.JS express backend along with an Angular 4 frontend. The user ID is stored in JWT tokens, which do not expire. Here is the scenario: The user logs in. A JWT Token is generated and signed (containing the user ID). ...

Custom JSX element failing to include children during addition

I have created a unique component in JSX, like this: const CustomComponent = ({content}) => { return <div className={content}></div>; } I am using it as follows: <CustomComponent content={"xyz"}> <p>Some additio ...

Is your Angular app missing i18next translations?

Can Angular's i18next provider be configured to hide any value when the key is not defined? The issue arises when there is no translation defined for a specific key like my:key. I want to display an empty string in the template instead of showing the ...