Not allowed to navigate top frame to data URL

jkathir · August 2017

The full html file with text "Full Example code of Export table with Sorting, Searching and Paging(responsive) features" provided in the below link to export data table into different options.

http://technoscripts.com/export-html-table/
However all the export options doesn't work when tested locally and throws the following error on clicking export options for

file:///C:/Test/libs/tableExport.js:171 Not allowed to navigate top frame to data URL: data:application/json;filename=exportData;base64,W3siaGVhZGVyIjpbWyJTci5ObyIsIk5hbWUiLCJDb3VudHJ5IiwiU2FsYXJ5Il1dLCJkYXRhIjpbWyIwMDEiLCJSYWh1bCIsIkluZGlhIiwiMjAwMDAiXSxbIjAwMiIsIkNoYXJsZXMiLCJVbml0ZWQgS2luZ2RvbSIsIjI4MDAwIl0sWyIwMDMiLCJNZW5zaHJpbCIsIkF1c3RyYWxpYSIsIjcwMDAwIl0sWyIwMDQiLCJHYW5lc2giLCJJbmRpYSIsIjE4MDAwIl0sWyIwMDUiLCJNYWl0aGlsaSIsIkluZGlhIiwiMTIwMDAiXSxbIjAwNiIsIlBhdmFuIiwiSW5kaWEiLCI1MDAwMCJdLFsiMDA3IiwiUmFrZXNoIiwiVVMiLCI3NTAwMCJdLFsiMDA4IiwiTWF5dXIiLCJJbmRpYSIsIjEwMDAwMCJdLFsiMDA5IiwiTmlSUmFOamFuIiwiSW5kaWEiLCI4NTAwMCJdLFsiMDEwIiwiVGFubWF5IiwiQXVzdHJpYSIsIjMwMDAwIl1dfV0=
The following export options doesn't work

JSON, JSON (IgnoreColumn), JSON (With Escape), PNG, PDF

Please let me know.

kthorngren · August 2017

When I go to the page you linked I get this error:
Uncaught SyntaxError: Invalid or unexpected token (index):218

That will keep the button from working since your JS stopped executing.

Kevin

jkathir · August 2017

Full HTML code for reference.

technoscripts.com/export-html-table/

<!DOCTYPE html>   
<html lang="en">   
<head>   
<meta charset="utf-8">   
<title>Export HTML table to Excel / CSV / PDF / JSON / PNG / WORD / XML / TXT using jQuery</title><meta name="description" content="DataTables is a plug-in for the jQuery JavaScript library."> 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">   
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- export plug-in files start-->
<!-- <script src="libs/jquery-1.11.1.min.js"></script>-->
<script type="text/javascript" src="libs/tableExport.js"></script>
<script type="text/javascript" src="libs/base64.js"></script>
<script type="text/javascript" src="libs/html2canvas.js"></script>
<script type="text/javascript" src="libs/sprintf.js"></script>
<script type="text/javascript" src="libs/jspdf.js"></script>
<script type="text/javascript" src="libs/jquery.base64.js"></script>
<script type="text/javascript">
<!-- export plug-in files end-->
<!-- Toggle Button code start-->
$(document).ready(function () {
$("#exportButton").click(function () {
$("#exportTable").toggle();
});
});
</script>
<!-- Toggle Button code end-->
</head>  
<body style="margin:20px auto">  
<div class="container">
<div class="row header" style="text-align:center;color:green">
<h3>Export HTML table to Excel / Word / PDF / JSON / PNG / XML / CSV / TXT / SQL</h3>
<button data-toggle="exportTable" id="exportButton" class="btn btn-primary">click here to Export Data</button><br/><br/>
<div id="exportTable" style="display:none;">
<a href="#" onClick ="$('#myTable').tableExport({type: 'json', escape: 'false'});"><img src='images/json.png' width="24"/> JSON</a>
<a href="#" onClick ="$('#myTable').tableExport({type: 'json', escape: 'false', ignoreColumn: '[2,3]'});"><img src='images/json.png' width="24"/> JSON (ignoreColumn)</a>
<a href="#" onClick ="$('#myTable').tableExport({type: 'json', escape: 'true'});"><img src='images/json.png' width="24"/> JSON (with Escape)</a>
<a href="#" onClick ="$('#myTable').tableExport({type: 'xml', escape: 'false'});"><img src='images/xml.png' width="24"/> XML</a>
<a href="#" onClick ="$('#myTable').tableExport({type: 'sql'});"><img src='images/sql.png' width="24"/> SQL</a>
<a href="#" onClick ="$('#myTable').tableExport({type: 'csv', escape: 'false'});"><img src='images/csv.png' width="24"/> CSV</a>
<a href="#" onClick ="$('#myTable').tableExport({type: 'txt', escape: 'false'});"><img src='images/txt.png' width="24"/> TXT</a>
<a href="#" onClick ="$('#myTable').tableExport({type: 'excel', escape: 'false'});"><img src='images/xls.png' width="24"/> XLS</a>
<a href="#" onClick ="$('#myTable').tableExport({type: 'doc', escape: 'false'});"><img src='images/word.png' width="24"/> Word</a>
<a href="#" onClick ="$('#myTable').tableExport({type: 'powerpoint', escape: 'false'});"><img src='images/ppt.png' width="24"/> PowerPoint</a>
<a href="#" onClick ="$('#myTable').tableExport({type: 'png', escape: 'false'});"><img src='images/png.png' width="24"/> PNG</a>
<a href="#" onClick ="$('#myTable').tableExport({type: 'pdf', escape: 'false'});"><img src='images/pdf.png' width="24"/> PDF</a>
</div><br/>
</div>
<table id="myTable" class="table table-striped">  
<thead>  
<tr>  
<th>Sr.No</th>  
<th>Name</th>  
<th>Country</th>  
<th>Salary</th>  
</tr>  
</thead>  
<tbody>  
<tr>  
<td>001</td>  
<td>Rahul</td>  
<td>India</td>  
<td>20000</td>  
</tr>  
<tr>  
<td>002</td>  
<td>Charles</td>  
<td>United Kingdom</td>  
<td>28000</td>  
</tr>  
<tr>  
<td>003</td>  
<td>Menshril</td>  
<td>Australia</td>  
<td>70000</td>  
</tr>  
<tr>  
<td>004</td>  
<td>Ganesh</td>  
<td>India</td>  
<td>18000</td>  
</tr>  
<tr>  
<td>005</td>  
<td>Maithili</td>  
<td>India</td>  
<td>12000</td>  
</tr>  
<tr>  
<td>006</td>  
<td>Pavan</td>  
<td>India</td>  
<td>50000</td>  
</tr>  
<tr>  
<td>007</td>  
<td>Rakesh</td>  
<td>US</td>  
<td>75000</td>  
</tr>  
<tr>  
<td>008</td>  
<td>Mayur</td>  
<td>India</td>  
<td>100000</td>  
</tr>  
<tr>  
<td>009</td>  
<td>NiRRaNjan</td>  
<td>India</td>  
<td>85000</td>  
</tr>  
<tr>  
<td>010</td>  
<td>Tanmay</td>  
<td>Austria</td>  
<td>30000</td>  
</tr>  
<tr>  
<td>011</td>  
<td>Sara</td>  
<td>India</td>  
<td>750000</td>  
</tr>  
<tr>  
<td>012</td>  
<td>JonRoot</td>  
<td>India</td>  
<td>65000</td>  
</tr>  
</tbody>  
</table>
</div>
</body>  
<script>
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
</html>

tangerine · August 2017

You should take this up with the author of the example you linked to,
tableExport.js is not provided by DataTables, which has its own "Buttons" module to handle exports.

jkathir · August 2017

The author's email is not known. any suggestions on what might be the issue can be useful and will try to resolve it and post if solved..just need suggestions or comments based on the experience...

tangerine · August 2017

The example page has a "Contact" link.

jkathir · August 2017

I have contacted the link and will wait for the response. Meanwhile, do you have any suggestions or comments to resolve them?

jkathir · September 2017

Several scripts caused this issue. We can close this.

Not allowed to navigate top frame to data URL

Not allowed to navigate top frame to data URL

Answers

Howdy, Stranger!

Categories

DataTables

Not allowed to navigate top frame to data URL

Not allowed to navigate top frame to data URL

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables