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

`Dealing with Java Servlet Exception in Kendo UI Environment`

I am facing an issue with displaying date in my Kendo UI grid. The data is coming from a Java servlet, and I have set the status code to 500 whenever an error occurs. Although I can see the error on the console, I am unable to handle it in JavaScript. My g ...

Can SQLite databases be integrated into web applications?

As a beginner in web application development, I appreciate your patience with my question. I have come across a situation where the web application needs to incorporate a SQLite database. In addition, I need to find a way to access the database using a s ...

Enhance the mobility of the lunar rover

If you're looking for a fun Android game, check out "Moon Buggy" on the Play Store. In this game, you get to drive a vehicle on the moon while fending off attacks from UFOs. https://i.sstatic.net/WOOlv.gif Currently, I'm working on improving th ...

Exploration of mapping in Angular using the HttpClient's post

After much consideration, I decided to update some outdated Angular Http code to use HttpClient. The app used to rely on Promise-based code, which has now been mostly removed. Here's a snippet of my old Promise function: public getUser(profileId: nu ...

The library "vue-property-decorator" (v10.X) is causing issues with resolving in Webpack despite being successfully installed

Encountered an error message Module not found: Error: Can't resolve './decorators/Emit' while attempting to import functionality from the library vue-property-decorator. The package is installed and accessible, ruling out a simple installati ...

Utilizing commonjs in Rollup configuration

Currently, I am tackling a project in Angular2. After going through the Angular2 aot documents, I successfully generated ngFactory files by utilizing rollup js as recommended. However, I encountered some npm packages that are non-es6. To load these non-es6 ...

Tips on delaying the return of the Angular compiler until the subscription is complete

I'm facing an issue with a function that needs to return a value while containing a subscription. The problem I'm encountering is that the return line is being executed before the subscription ends, testFunc(){ let objectType; let modul ...

Next.js routes taking precedence over storybook routes

I recently completed a storybook project. Now, I am looking to integrate it with another project built on next.js. The issue is that Storybook and next.js each have their own set of routes. I want to streamline the routing process by utilizing next.js and ...

The functionality of aggregating histograms by date in Elasticsearch is no longer functioning properly when using a script

After executing an ES query, I received a total of 26 results. The query included an aggregation histogram element structured as follows: "aggregations" : { "by_date" : { "date_histogram" : { "field" : "startDate", "interval" : ...

How can we effectively implement alert notifications for validating image sizes and formats prior to uploading?

code playground : https://codesandbox.io/s/quizzical-lamport-ql5ep I'm encountering an issue with the code provided in the CodeSandbox link. https://i.sstatic.net/xg3aK.png I've attempted to resolve this issue using various methods, but unfortu ...

The fix for the unresponsive fixed container in Angular 2 Material

I've encountered an issue with CSS and Angular 2 material. Any element with a fixed position doesn't behave as expected inside an md-sidenav-container. However, when it is placed outside the container, it works perfectly. I have created a Plunker ...

Formatting PDF exports in Angular using jspdf

I am attempting to export a table, but I am facing an issue with the formatting. The table I want to export looks similar to this: Below is the function I am using: public downloadAsPDF() { const doc = new jsPDF(); const specialElementHa ...

What is the process for setting up an AngularJS file within the Struts.xml configuration?

Currently, I am in the process of creating a web application with Struts2. My aim is to retrieve data from a database and present it in .json format. However, I would like this information to be displayed on a JSP page in a tabular layout. When I execute t ...

Angular2 RC5 and the issue with routing: No routes found to match

Currently, I am experimenting with implementing rc5 along with routes in my application. This is the functionality I am aiming to achieve: Navigate to the login page After successful login, redirect to the dashboard route which has a navigation bar at t ...

Utilize Typescript to ensure uniformity in object structure across two choices

Looking to create a tab component that can display tabs either with icons or plain text. Instead of passing in the variant, I am considering using Typescript to verify if any of the icons have an attribute called iconName. If one icon has it, then all othe ...

Using Typescript to Integrate node-gtf JavaScript Library into an Express Application

Would like to utilize a Typescript Express Server for integrating GTFS data with the help of the GTFS library (https://github.com/BlinkTagInc/node-gtfs) current version is ("gtfs": "^3.0.4") This is how I am importing the library imp ...

Selenium Chrome Driver allowing for sending key combinations to a window

I am looking to trigger a key press combination using the Selenium Chrome driver. This action does not involve sending text to a textbox or clicking on any buttons. My interest lies in executing commands like command+R (reload on Mac OS). Note that reload ...

NextJs Link component does not refresh scripts

While using the <Link> tag in NextJs for page navigation, I encountered an issue where my scripts do not rerun after switching pages. The scripts only run on the initial page load or when I manually reload the page. This behavior is different when us ...

Calculating month differences in Java to move to either the next or previous page

I need to create a versatile code that can determine the difference in months between two dates. For example, here is the input data: 1. date1 = 22/01/2016 date2 = 30/03/2016 2. date1 = 22/01/2016 date2 = 20/12/2015 Based on the month difference, I must ...

Utilizing PrimeNG Datatable to Connect with an Array of Objects in a Dynamic Manner

I currently have an array of objects with various properties such as: "rows": [ { "id": 1, "createdAt": "2017-07-21T06:05:38.000Z", "updatedAt": "2017-07-21T06:05:38.000Z", "createdBy": null, "modifiedBy": null, "name": "ABC", "owner": "Dian ...