How to force dataTableToCsv method in Google Visualization API to escape the hashtag sign

Question

It looks like the dataTableToCsv method stops when it encounters a "#" Because this is a google defined method, what would be the best way to escape this sign or even better, correct this?

csvContent = csvColumns + google.visualization.dataTableToCsv(data);

Here's a test. Notice that in this example, it will stop at Column D second row.

google.charts.load('current', {
  callback: drawBasic,
  packages: ['table']
});

function drawBasic() {
  var query = new google.visualization.Query(
    'https://docs.google.com/spreadsheets/d/1w1vaFAPTE440jc2cpYGftXSaPwGxU_x7iQRSGK35oYc/edit#gid=0'
  );
  query.setQuery('SELECT *');
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }


  var data = response.getDataTable();
  var options = {
    title: 'test'
  }

  var chart = new google.visualization.Table(document.getElementById('chart_div'));
  chart.draw(data, options)
  
   $('#Export').on('click', function () {
    var csvColumns;
    var csvContent;
    var downloadLink;
    var fileName;

    // build column headings
    csvColumns = '';
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
      csvColumns += data.getColumnLabel(i);
      if (i < (data.getNumberOfColumns() - 1)) {
        csvColumns += ',';
      }
    }
    csvColumns += '\n';

    // build data rows
    csvContent = csvColumns + google.visualization.dataTableToCsv(data);

    // download file

    fileName = 'data.csv';

      downloadLink = document.createElement('a');
      downloadLink.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvContent);
      downloadLink.download = fileName;
      raiseEvent(downloadLink, 'click');
      downloadLink = null;

 function raiseEvent(element, eventType) {
    var eventRaised;
    if (document.createEvent) {
      eventRaised = document.createEvent('MouseEvents');
      eventRaised.initEvent(eventType, true, false);
      element.dispatchEvent(eventRaised);
    } else if (document.createEventObject) {
      eventRaised = document.createEventObject();
      element.fireEvent('on' + eventType, eventRaised);
    }
  }

});
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <button id="Export" title="Download to CSV">Download to CSV</Button>
<div id="chart_div"></div>

Answer 1

• You want to download the values of Spreadsheet as a CSV file.
• In your current issue, the CSV data is not completed. It's "it will stop at Column D second row".

If my understanding is correct, how about this modification? Please think of this as just one of several answers.

It was found that when I saw csvContent of csvContent = csvColumns + google.visualization.dataTableToCsv(data);, the CSV data has the whole values from the Spreadsheet. So in this modification, csvContent is converted to a blob and it is downloaded.

Modified script:

When your script is modified, please modify as follows.

From:

downloadLink.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvContent);

To:

downloadLink.href = URL.createObjectURL(new Blob([csvContent], {type: "text/csv"}));

or

downloadLink.href = window.URL.createObjectURL(new Blob([csvContent], {type: "text/csv"}));

References:

• Blob
• URL.createObjectURL()

If I misunderstood your question and this was not the direction you want, I apologize.