Change Page Charset with Javascript

Question

I have a single-page app which specifies the UTF-8 charset with a "meta" tag within the head:

<head>
  <meta charset="utf-8">
  ...
</head>
...

On the "reports" page within the app, I use a table library which also exports the report as a CSV file. This library uses the HTML page's charset as the charset for the exported CSV file, and this can't be reconfigured. However, the CSV file needs to be imported by a legacy system which can't understand UTF-8.

The approach I tried to use to overcome this issue is to change the charset (by modifying the "meta" tag) whenever I navigate to/from the reports page--that way the library would export to a charset more palatable to the legacy app. I've tried using angularjs and ng-if like this:

<head ng-controller="NavigationController">
  <meta ng-if="!onReportsPage" charset="utf-8">
  <meta ng-if="onReportssPage" charset="windows-1252">
  ...
</head>

I've also tried manually removing/adding the meta tag like this:

<head id="head">
  <meta id="charset" charset="utf-8">
  ...
</head>

...

// called when navigating to the "reports" page
var head = document.getElementById('head');
var oldCharsetTag = document.getElementById('charset');
head.removeChild(oldCharsetTag);
var newCharsetTag = document.createElement('meta');
newCharsetTag.setAttribute('id', 'charset');
newCharsetTag.setAttribute('charset', 'windows-1252');
head.appendChild(newCharsetTag);
...
// called when navigating away from the "reports" page (similar)
...
newCharsetTag.setAttribute('charset', 'utf-8');
...

From the angular/javascript POV the charset appears to be changed successfully in the DOM, however neither method seems to work (I've tested in Chrome). The library still exports as UTF-8 even though I changed the head element. I've thought of embedding the reports page within an iframe so it can use its own encoding from the start, but that would require a large rewrite of the page and its resources. Does anyone have any other ideas?

Thanks for the help.

UPDATE: according to this page, the approach I tried will never work. Can anyone think of an alternative? I just want to get the library (angular-datatables) to export the CSV with a different encoding.

What about putting the reports in an `iframe` with a meta tag with the new charset? — neilsimp1, Feb 22 '16 at 20:52
@neilsimp1: I thought of that, but that would require extensive changes to the "reports" page to get it to work independently. I'm hoping there's a solution involving less work. — Alvin Thompson, Feb 22 '16 at 20:59

Change Page Charset with Javascript

0 Answers0