#javascript #html #excel #export-to-excel
#javascript #HTML #excel #экспорт в Excel
Вопрос:
Я создал код для преобразования данных таблицы HTML в файл Excel, и он отлично работает. Файл создается успешно
Так в чем проблема
Когда я пытаюсь открыть файл Excel, он показывает ошибку, которая гласит.
Excel не может открыть файл filename.xlsx поскольку формат файла или расширение файла недопустимы.
Ниже приведен код, который я использую
HTML-код
<table id="tblexportData" class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<td>Robert</td>
<td>robert@gmail.com</td>
<td>26</td>
<td>9999999999</td>
</tr>
<tr>
<td>Michael</td>
<td>michael@gmail.com</td>
<td>24</td>
<td>9999999999</td>
</tr>
<tr>
<td>Julie</td>
<td>julie@gmail.com</td>
<td>36</td>
<td>9999999999</td>
</tr>
<tr>
<td>Trevor</td>
<td>trevor@gmail.com</td>
<td>28</td>
<td>9999999999</td>
</tr>
</tbody>
</table>
<button onclick="exportToExcel('tblexportData', 'user-data')" class="btn btn-success example-screen">Export Table Data To Excel File</button>
Код Javascript
function exportToExcel(tableID, filename = ''){
var downloadurl;
var dataFileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
var tableSelect = document.getElementById(tableID);
var tableHTMLData = tableSelect.outerHTML.replace(/ /g, ' ');
console.log(tableSelect.outerHTML);
console.log(tableSelect.outerHTML.replace(/ /g, ' '));
// Specify file name
filename = filename?filename '.xlsx':'export_excel_data.xlsx';
// Create download link element
downloadurl = document.createElement("a");
document.body.appendChild(downloadurl);
if(navigator.msSaveOrOpenBlob){
console.log('msSave if');
var blob = new Blob(['ufeff', tableHTMLData], {
type: dataFileType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
console.log('msSave else');
// Create a link to the file
downloadurl.href = 'data:' dataFileType ', ' tableHTMLData;
// Setting the file name
downloadurl.download = filename;
//triggering the function
downloadurl.click();
}
}
Примечание: — Я пробовал application/vnd.ms-excel для xls, и это работает, но я не работаю с application/vnd.openxmlformats-officedocument.spreadsheetml.sheet , т.е. для xlsx.
Ответ №1:
если вы используете kendo-UI, он поддерживает встроенную поддержку экспорта в Excel export. kendo Excell
если нет, я использую этот метод:
$scope.exportData = function () {
debugger;
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:DisplayRightToLeft/><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]; }) }
if ($scope.mororList)
var table = document.getElementById("Grid");
else
var table = document.getElementById("OtherGrid");
var filters = $('.k-header .k-grid-toolbar').remove();
var newtable = table.childNodes[1].innerHTML table.childNodes[2].innerHTML
newtable = "<table style='direction:rtl'>" newtable "</table>";
$('.k-rtl .k-grid .k-widget').after(filters);
var ctx = { worksheet: name || 'Worksheet', table: newtable };
var url = uri base64(format(template, ctx));
var a = document.createElement('a');
a.href = url;
a.download = 'excelName.xls';
a.target = "_blank";
document.body.appendChild(a);
a.onclick = "aclickfn";
a.click();
document.body.removeChild(a);
setTimeout(function () {
}, 200);
};
Комментарии:
1. Нет, я не использую kendo ui. Я использую чистый javascipt и jquery