web-dev-qa-db-fra.com

Encodage UTF-8 lors de l'exportation d'un tableau HTML vers Excel

J'essaie d'exporter un tableau HTML vers Excel à l'aide de javascript. C'est le code javascript

<script type="text/javascript">
    var tableToExcel = (function() {
          var uri = 'data:application/vnd.ms-Excel;base64,'
            , template = '<html xmlns:o="urn:schemas-Microsoft-com:office:office" xmlns:x="urn:schemas-Microsoft-com:office:Excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
            , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
            , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
          return function(table, name) {
            if (!table.nodeType) table = document.getElementById(table)
            var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
            window.location.href = uri + base64(format(template, ctx))
          }
        })()
</script> 

Ceci est mon en-tête

<meta http-equiv="content-type" content="application/vnd.ms-Excel;" charset="UTF-8">
<meta charset="UTF-8">

C'est ma table

<table id="tblExport">
   <tr>
      <td>José</td>
      <td>María</td>
   </tr>
</table>

Et c'est le bouton qui déclenche l'exportation

<input type="button" onclick="tableToExcel('tblExport', 'W3C Example Table')" value="Export to Excel">

Je ne peux pas exporter correctement les caractères UTF-8, comme é ou í. J'essaye ceci Importer un tableau HTML dans OO Calc en UTF8 sans convertir en entités mais ne fonctionne pas. J'ai MS-Excel 2010 et Win7 64 bits.

Comment puis-je exporter correctement les caractères UTF-8?

Merci!

12
Josecanalla

Premièrement: votre en-tête est mal formé. CA devrait etre:

<meta http-equiv="content-type" content="application/vnd.ms-Excel; charset=UTF-8">

Et deuxièmement: il devrait être dans votre modèle, car il contient des informations sur le jeu de caractères pour Excel.

<script type="text/javascript">
    var tableToExcel = (function() {
          var uri = 'data:application/vnd.ms-Excel;base64,'
            , template = '<html xmlns:o="urn:schemas-Microsoft-com:office:office" xmlns:x="urn:schemas-Microsoft-com:office:Excel" xmlns="http://www.w3.org/TR/REC-html40"><meta http-equiv="content-type" content="application/vnd.ms-Excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
            , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
            , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
          return function(table, name) {
            if (!table.nodeType) table = document.getElementById(table)
            var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
            window.location.href = uri + base64(format(template, ctx))
          }
        })()
</script> 
32
Axel Richter
function exportData(report_id){
    var blob = new Blob([document.getElementById(report_id).innerHTML], {
        type: "text/plain;charset=utf-8;"
    });
    saveAs(blob, "Report.xls");

Prend les données de la table sous forme de texte brut et enregistre sous Excel sans problème d'encodage

1
C.T

Je citerai à nouveau un respect qui a été indiqué ci-dessus. Vous devez inclure le code de la balise Meta dans la balise head:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<!--This is what you should include-->
<meta http-equiv="content-type" content="application/vnd.ms-Excel; charset=UTF-8">
<!---->
<title>Ver Listado Pago</title>
<link href="/Images/Decretos.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet" />
<link href="~/Content/booostrap/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/booostrap/bootstrap-theme.css" rel="stylesheet" />
<link href="~/Content/booostrap/bootstrap-theme.min.css" rel="stylesheet" />

Cela a fonctionné pour moi. Mais IE et WIN10 ont des conflits à télécharger en raison de l'extension xls. Cependant, le problème des caractères spéciaux est corrigé

0
Bastian Salazar

si vous voulez changer le nom de fichier par défaut en fonction de la réponse de @Axel Richter , essayez ceci:

var link = document.createElement('a');
link.download = 'filename.xls';
...
link.href = uri + base64(format(template, ctx));
link.click();
...

remplacez window.location.href par link.href

0
Nadir Hasimov

Utilisez le code ci-dessous dans la var uri:

var uri = 'data:application/vnd.ms-Excel;charset=UTF-8;base64,'

Sortie

0
Maurivan