I have a problem with DataTables and Excel. I use pdf and print function, it works well but Excel not. I have this message in the browser (with F12):
> Uncaught TypeError: f.parseXML is not a function
at a (buttons.html5.min.js:26)
at _Api.action (buttons.html5.min.js:26)
at v (dataTables.buttons.min.js:16)
at HTMLButtonElement.<anonymous> (dataTables.buttons.min.js:17)
at HTMLButtonElement.dispatch (jquery-3.3.1.slim.min.js:2)
at HTMLButtonElement.v.handle (jquery-3.3.1.slim.min.js:2)
My javascript:
<script type="text/javascript">
$(document).ready(function () {
var table = $('#summary').DataTable({
dom: 'Bfrtip',
buttons: ['excel', 'csv', 'pdf', 'print']});
});
</script>
My base.html.twig
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href=".min.css">
<link rel="stylesheet" type="text/css" href=".10.19/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href=".5.4/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href=".2.3/css/responsive.dataTables.min.css">
<link rel="stylesheet" type="text/css" href=".5.4/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href=".2.7/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href=".dataTables.min.css">
<link rel="stylesheet" href="{{ asset('css/main.css') }}" />
{% block stylesheets %}{% endblock %}
</head>
<body>
<script type="text/javascript"></script>
<script src=".3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src=".js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src=".1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src=".js/2.18.1/moment.min.js"></script>
<script src=".10.19/js/jquery.dataTables.js"></script>
<script src=".10.19/js/dataTables.bootstrap4.min.js"></script>
<script src=".5.4/js/dataTables.buttons.min.js"></script>
<script src=".5.4/js/buttons.colVis.min.js"></script>
<script src=".5.4/js/buttons.flash.min.js"></script>
<script src=".1.3/jszip.min.js"></script>
<script src=".1.36/pdfmake.min.js"></script>
<script src=".1.36/vfs_fonts.js"></script>
<script src=".5.4/js/buttons.html5.min.js"></script>
<script src=".5.4/js/buttons.print.min.js"></script>
<script src=".2.7/js/dataTables.select.min.js"></script>
<script src=".2.3/js/dataTables.responsive.min.js"></script>
<script src=".editor.min.js"></script>
<script src=".bootstrap4.min.js"></script>
<script src=".10.19/sorting/datetime-moment.js"></script>
<script src=".10.19/dataRender/datetime.js"></script>
<div class="container">
{% block body %}{% endblock %}
</div>
{% block javascripts %}{% endblock %}
</body>
</html>
The button appears but it doesn't work. I'm working with Chrome. I searched but I did not find the solution.
Thank you in advance.
I have a problem with DataTables and Excel. I use pdf and print function, it works well but Excel not. I have this message in the browser (with F12):
> Uncaught TypeError: f.parseXML is not a function
at a (buttons.html5.min.js:26)
at _Api.action (buttons.html5.min.js:26)
at v (dataTables.buttons.min.js:16)
at HTMLButtonElement.<anonymous> (dataTables.buttons.min.js:17)
at HTMLButtonElement.dispatch (jquery-3.3.1.slim.min.js:2)
at HTMLButtonElement.v.handle (jquery-3.3.1.slim.min.js:2)
My javascript:
<script type="text/javascript">
$(document).ready(function () {
var table = $('#summary').DataTable({
dom: 'Bfrtip',
buttons: ['excel', 'csv', 'pdf', 'print']});
});
</script>
My base.html.twig
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://bootswatch./4/flatly/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables/1.10.19/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables/buttons/1.5.4/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables/responsive/2.2.3/css/responsive.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables/buttons/1.5.4/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables/select/1.2.7/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://editor.datatables/extensions/Editor/css/editor.dataTables.min.css">
<link rel="stylesheet" href="{{ asset('css/main.css') }}" />
{% block stylesheets %}{% endblock %}
</head>
<body>
<script type="text/javascript"></script>
<script src="https://code.jquery./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdn.datatables/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables/buttons/1.5.4/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables/buttons/1.5.4/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables/buttons/1.5.4/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables/buttons/1.5.4/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables/select/1.2.7/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://editor.datatables/extensions/Editor/js/dataTables.editor.min.js"></script>
<script src="https://editor.datatables/extensions/Editor/js/editor.bootstrap4.min.js"></script>
<script src="https://cdn.datatables/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
<script src="https://cdn.datatables/plug-ins/1.10.19/dataRender/datetime.js"></script>
<div class="container">
{% block body %}{% endblock %}
</div>
{% block javascripts %}{% endblock %}
</body>
</html>
The button appears but it doesn't work. I'm working with Chrome. I searched but I did not find the solution.
Thank you in advance.
Share Improve this question edited Oct 10, 2018 at 12:03 delph49 asked Oct 10, 2018 at 11:32 delph49delph49 991 silver badge11 bronze badges1 Answer
Reset to default 10You are using the slim version of jQuery which does not support the parseXML function. Use the normal version instead. For version 3.3.1 it will be:
<script
src="https://code.jquery./jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
For all current versions go to https://code.jquery./jquery/ and choose the "minified" version of jQuery Core (and NOT the "slim minified" version).