I'm taking in a csv file, which includes the test value 'Iñtërnâtiônàlizætiøn' and outputting it to a simple HTML table using JavaScript.
The table displays the output as I�t�rn�ti�n�liz�ti�n. I've been looking on the web and have tried the suggestions of changing font & also charset (tried UTF-8, UTF-16, windows-1252, iso 8859-1 & iso 8859-5) but nothing works.
It's a drag and drop that takes in the csv and changes it into an HTML table on the webpage and uses xml to output a word document of the same table.
Sorry, I should have said:- There is no PHP on this page, it all takes place in the local browser, hence JavaScript. Also, I don't have control over the coding of the files being used or the settings in the user's browser. Most of my users are going to be making this file in excel, I suspect.
Here is the code:
<div id="drop_zone">Drop files here</div>
<output id="list"></output>
<script type="text/javascript" >
var URLadd = "My url here";
var OutString = [];
var TestFunc = [];
function handleFileSelect(evt) { // function 1 bracket
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
// files is a FileList of File objects. List some properties.
var output = [];
oForm = document.forms[0];
oText = oForm.elements["Inst"];
var InstCode = oText.value;
if (InstCode == "")
{
InstCode = "<b>Please enter your institution code</b>";
}
for (var i = 0, f; f = files[i]; i++) { // loop 1
if (f.name.match('\.csv')) { // if 1
// this part is for when a csv file is drag n dropped
var Filename = decodeURI(escape(f.name));
var reader = new FileReader();
// when the file loads, the function beneath is run
reader.onload = (function(theFile) { // function 2
// this function is executed before it is returned, by the last parenthesis (f)
return function(e) { //function 3
var contents = e.target.result;
var FileLines = contents.split( "\n" );
var LineCount = FileLines.length;
OutString = '<table id="mytab" border="1" width="100%"><tr>';
var ColCount = 1;
for (var i=1; i<LineCount; ++i)
{ // loop 2
if (ColCount>4)
{ColCount=0;}
if(ColCount==0)
{ // if 2
OutString += '</tr><tr>';
ColCount = 1;
} // close if 2
OutString += '<td width=25%>';
var CommaSplit = FileLines[i].split(",");
var CommaCount = CommaSplit.length;
if (CommaCount == 5)
{ // if 3
OutString += "<strong> " + CommaSplit[0] + " " + CommaSplit[1] + "</strong><br>";
OutString += "Username: " + CommaSplit[3] + "<br>Password: " + CommaSplit[3];
OutString += "<br>Institution Code: " + InstCode + "<br>" + URLadd;
ColCount += 1;
} else { // else of if 3
for (var j= 0; j<CommaCount; ++j)
{ // loop 3
OutString += CommaSplit[j] + '<br>';
ColCount += 1;
} // close loop 3
} //close if 3
OutString += '</td>';
} // close loop 2
OutString += '</tr></table>';
TestFunc = '<html xmlns:v="urn:schemas-microsoft-com:vml" ';
TestFunc += 'xmlns:o="urn:schemas-microsoft-com:office:office" ';
TestFunc += 'xmlns:w="urn:schemas-microsoft-com:office:word" ';
TestFunc += 'xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" ';
TestFunc += 'xmlns="http://www.w3.org/TR/REC-html40">';
TestFunc += '<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta><title>Passwords Doc</title>';
TestFunc += '<style>v\:* {behavior:url(#default#VML);}o\:* {behavior:url(#default#VML);}w\:* {behavior:url(#default#VML);}.shape behavior:url(#default#VML);}</style>';
TestFunc += '<style>@page{mso-page-orientation: landscape; size:29.7cm 21cm; margin:0cm 0cm 0cm 0cm;}';
TestFunc += '@page Section1 {mso-header-margin:0in; mso-footer-margin:0in; mso-header: h1; mso-footer: f1; }';
TestFunc += ' div.Section1 { page:Section1; }';
TestFunc += 'table#mytab{ margin: 0.2in 0.2in 0.2in 0.2in; width:0px; height:0px; overflow:hidden;}';
TestFunc += '</style><xml><w:WordDocument><w:View>Print</w:View><w:Zoom>100</w:Zoom><w:DoNotOptimizeForBrowser/>';
TestFunc += '</w:WordDocument></xml></head><body><div class="Section1">';
TestFunc += OutString;
TestFunc += '</div></body></html>';
var OutPutLine = "<a href='data:application/msword;charset=UTF-8, " + encodeURIComponent(TestFunc) + "' download='" + decodeURIComponent(escape('Login Slips.doc')) + "' ><input id='Button1' type='button' value='Open printable sheet' /></a>";
output.push(OutPutLine);
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
var span = document.createElement('span');
span.innerHTML = [OutString].join('');
document.getElementById('list').insertBefore(span, null);
}; // close function 3
})(f); // close function 2
reader.readAsText(f);
// this creates the button that opens the finished document
//var OutPutLine = "<a href='WordTemplate.doc' ><input id='Button1' type='button' value='Open printable sheet' /></a>";
output.push(OutPutLine);
} else { // else of if 1
// this triggers if its not a csv file that drag n drops
output.push('<strong>', escape(f.name), ' is not a comma seperated (.csv) file!!!!</strong>');
} // close if 1
} // close loop 1
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
} // close function 1
function handleDragOver(evt) { // function 4
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
} // close function 4
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
</script>
