Troubleshooting: Issue with Chrome's CSV Export Functionality in JavaScript/AngularJS

Currently, I am troubleshooting an issue with exporting a CSV file from a data table on a web application. The export functionality works fine on all browsers except for Chrome when the export button is clicked. I have been trying to solve this problem for some time now and it's becoming quite frustrating.

Below is the code snippet of my service that used to work perfectly until recently. Any assistance would be highly appreciated.

svc.downloadContent =
(target, fileName, content) => {
  if (!browserSvc.canDownloadFiles()) return;

  // Handling download for IE10
  if (window.navigator.msSaveOrOpenBlob) {
    const blob = new Blob([content], {type: 'text/csv'});
    window.navigator.msSaveOrOpenBlob(blob, fileName);
  // Handling download for IE9
  } else if (env.browser === 'Explorer') {
    const frame = document.createElement('iframe');
    document.body.appendChild(frame);
    angular.element(frame).hide();

    const cw = frame.contentWindow;
    const cwDoc = cw.document;
    cwDoc.open('text/csv', 'replace');
    cwDoc.write(content);
    cwDoc.close();
    cw.focus();
    cwDoc.execCommand('SaveAs', true, fileName);

    document.body.removeChild(frame);
  // Handling download for other browsers
  } else {
    const blob = new Blob([content], {type: 'text/csv'});

    const url = URL.createObjectURL(blob);

    const a = angular.element(target);
    const download = a.attr('download');
    // If download is not already in progress ...
    if (!download) {
      a.attr('download', fileName);
      a.attr('href', url);

      // This must run in the next tick to avoid
      // "$digest already in progress" error.
      //$timeout(() => target.click());
      try {
        target.click();
        // Clear attributes to prepare for next download.
        a.attr('download', '');
        a.attr('href', '');
      } catch (e) {
        console.error('csv-svc.js: e =', e);
      }
    }
  }

Answer №1

Shortly after posting my question, I was able to find the solution. It turns out that I needed to include an else if statement specifically for Chrome. Even though I have resolved the issue, I have decided to share the fix here in case it can be of help to someone else in the future.

else if (env.browser === 'Chrome') {
    const blob = new Blob([content], {type: 'text/csv'});
    
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.style = 'visibility:hidden';
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

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

Double Calling of Angular Subscription

I am currently working with a series of observables that operate in the following sequence: getStyles() --> getPrices() Whenever a config.id is present in the configs array, getStyles() retrieves a style Object for it. This style Object is then passed ...

New possibilities arise following ng-switch implementation

I am facing an issue with a switch that alters the value of a variable known as p. <div ng-switch on="p"> <div ng-switch-when="true"> /*...displaying nodes and option to add node*/ </div> <div ng-swi ...

What is the best way to choose a date and time in a custom format within my React application?

I'm currently developing the front-end of my application using React. I am looking for a way to capture the date and time in the specific format shown in this image. Any suggestions or solutions would be greatly appreciated! ...

What is the correct way to display the date in a React application?

I am working on a project that involves integrating solidity contracts into a web portal. In one of the contracts, I have stored dates as uint values like this: 1539491531. However, when I display these dates on the web page, they appear different from wh ...

Learn how to extract substrings from a variable within an API using Vue.js

Exploring VueJs for the first time and looking to split a string by comma (,) retrieved from an API into separate variables. The data is coming from a JSON server. "featured-property": [ { "id": "1", " ...

Addressing memory leaks in React server-side rendering and Node.js with setInterval

Currently in my all-encompassing react application, there's a react element that has setInterval within componentWillMount and clearInterval inside componentWillUnmount. Luckily, componentWillUnmount is not invoked on the server. componentWillMount( ...

Struggling to make the controller karma test pass

I am currently working on developing a "To Do list" using angular js. My goal is to allow users to click on a checkbox to mark tasks as completed after they have been finished. While the functionality works fine in the index.html file, I am struggling to p ...

Getting data from a response in Express.js involves using the built-in methods provided by

I am a beginner at Node.js and I'm currently experimenting with client-server communication. Below are the codes I've been working on: server: app.post('/zsa', (req, res) => { res.send("zsamo"); }); client: fetch(&qu ...

Obtain the dynamic identifier of an element within every block using jQuery in a rails application

Let me illustrate my issue with a simple example. I am currently developing a recipe application. Within the show partial that loads via AJAX, I have the following setup: _show.html.erb <% @recipe.ingredients.each do |ingredient| %> <div class ...

a guide to presenting information in a horizontal layout within a single table using the Laravel framework and Vue.js

I have 2 tables: table 1 ________________ | name_id name | | 1 john | | 2 heaven | |_______________| table 2 _______________________ | id name_id product | | 1 1 bag | | 2 1 shoes | |______ ...

New enhancements for default template project with Ionic and Angular integration

I'm a beginner in the world of Ionic and I found myself feeling a bit overwhelmed when trying to install the most recent version of Ionic. The official site, ionicframework.com, states that the latest version is 1.1.0. However, when checking npm, I se ...

saving a JSON element in a JavaScript array

Currently, I am utilizing AJAX to fetch data from a database using PHP and then converting it into JSON format. <?php echo json_encode($data); ?> This is the AJAX function being used: ajaxCall("getdata.php", container, function (data) { var co ...

Is there a way to update the background dynamically?

I'm currently developing a weather application and I want the background to change dynamically based on the data retrieved from an API. Initially, I set up a variable and utilized an if statement for this purpose. However, I encountered difficulty in ...

Is there a way to output several lines from a JSON file in print form?

I'm working with HTML code that displays multiple lines from a JSON file, but it only shows one line at a time. How can I modify the code to display all users' information? <!DOCTYPE html> <html> <head> <script> function ...

Close ui-bootstrap typeahead menu only when a row is manually chosen

I have set up this jsBin to show the problem I am facing. When you visit the link and try to type "Five," the expected behavior would be to type "Five" and then press tab. However, in this case, you need to type "Five" and then either escape or click outsi ...

Refresh WebPage automatically after a Servlet successfully uploads and processes an image

I have a webpage that includes an image and a button. When the button is clicked, it uploads the image by submitting a form to a file upload servlet. However, after successfully uploading the image, the servlet does not display it in the img tag. Here is ...

Require assistance in understanding JSON data in the form of a variable

Apologies for any language barriers, but I have encountered a problem that I need help with. I am trying to create a highchart from an AJAX call. The following code works perfectly: chartOptions = { chart: { renderTo: 'grafica1', type: 'ar ...

After updating the INNERHTML, the NAV tag content is no longer functional

I am facing an issue with replacing the contents of a NAV tag that contains UL list items. The original HTML within the NAV tag works perfectly fine, but when I replace it with my own HTML - which matches the original word for word - the dropdown functiona ...

Utilizing ReactJS onBlur event for email field validation

Currently, I am using a MaterialUI Textfield for email input validation upon leaving the field. To achieve this, I have implemented a function triggered when the onBlur event occurs. My intention is to display an error message using helpertext. Here' ...

Ajax failing to trigger upon submission

I need assistance in creating a form that will first submit via AJAX before directing to a specified URL. Once submitted, an email should be sent to me through newsletter.php <script type='text/javascript'> $(function () { $("#signup") ...