似乎无法让此jsfiddle在本地工作...？

Question

This jsfiddle seems to be working fine for me, however when I try to replicate it doesn't work, when I press the button nothing happens? 这个jsfiddle似乎对我来说很好，但是当我尝试复制它时不起作用，当我按下按钮时什么也没发生？

http://jsfiddle.net/KPEGU/1850/ http://jsfiddle.net/KPEGU/1850/

Here's my code: 这是我的代码：

<html>
<head>
  <title>test</title>

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    a.export, a.export:visited {
    text-decoration: none;
    color:#000;
    background-color:#ddd;
    border: 1px solid #ccc;
    padding:8px;
}
  </style>


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function () {

    function exportTableToCSV($table, filename) {

            // Temporary delimiter characters unlikely to be typed by keyboard
            // This is to avoid accidentally splitting the actual contents
            tmpColDelim = String.fromCharCode(11), // vertical tab character
            tmpRowDelim = String.fromCharCode(0), // null character

            // actual delimiter characters for CSV
            colDelim = '","',
            rowDelim = '"\r\n"';

        // Grab text from table into CSV formatted                  
        var temp ="";
        var d =document.getElementById("myTable");
        var tmpColDelim = String.fromCharCode(11), // vertical tab character
            tmpRowDelim = String.fromCharCode(0);
        debugger;
        var numofRows =d.rows.length;
        for (var i = 0; i < numofRows; i++) {
            var row = "";
            for (var j = 0; j < d.rows[i].cells.length; j++) {
                row = row + tmpColDelim + (d.rows[i].cells[j].innerText).replace('"', '""');
            }
            temp = temp + tmpRowDelim + row;
        }
            temp = temp.split(tmpRowDelim).join(rowDelim)
                .split(tmpColDelim).join(colDelim);
            csv = '"' + temp + '"';



         debugger;
      var newWin = window.open("about:blank","_blank");
        var doc =newWin.document;
        newWin.document.open("application/csv","replace");
        newWin.document.charset="utf-8";

                             doc.write(csv);
        newWin.document.close();
        newWin.document.execCommand("SaveAs",true,"data.csv");
        newWin.close();  

           /* // Data URI
            var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
alert(csvData);

            $(this)
                .attr({
                'download': filename,
                    'href': csvData,
                    'target': '_blank'
            });*/
        }

        // This must be a hyperlink
        $(".export").on('click', function (event) {
            // CSV
            exportTableToCSV.apply(this, [$('#dvData>table'), 'data.csv']);

            // IF CSV, don't do event.preventDefault() or return false
            // We actually need this to be a typical hyperlink
        });
    });
});//]]>  

</script>


</head>
<body>

<hr>
<div id="dvData">
    <table id="myTable" class="myClass">
        <tr>
            <th>Column One</th>
            <th>Column Two</th>
            <th>Column  Three</th>
        </tr>
        <tr>
            <td>row1 Col1</td>
            <td>row1 Col2</td>
            <td>row1 Col3</td>
        </tr>
        <tr>
            <td>row2 Col1</td>
            <td>row2 Col2</td>
            <td>row2 Col3</td>
        </tr>
        <tr>
            <td>row3 Col1</td>
            <td>row3 Col2</td>
            <td>row3 Col3</td>
        </tr>
    </table>
</div>
<br/>
<a href="#" class="export" onclick="exportTableToCSV()">Export Table data into Excel</a>

<br/>
<br/>
<!-- Notes below -->
<hr>
<p>Notes</p>
<ul>
    <li> To write in new document and download the csv format without jQuery </li>

</ul>

</body>


</html>

Any idea why? 知道为什么吗？

Thank you! 谢谢！ -warfo09 -warfo09

Answer 1

You're using jquery in your code, yet you haven't included it in your head setion. 您在代码中使用了jquery，但尚未将其包括在头部分中。

add 加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

to your <head> declaration. 到您的<head>声明。

Note 注意

This is allowing google to host the jquery for you, whereas you might want to alternatively add the reference from a downloaded version of jquery for your convenience. 这允许google为您托管jquery，而为了方便起见，您可能希望从下载的jquery版本中添加引用。 However, There are 3 reasons why you should let google host jquery for you 但是，有3个原因让您为自己托管Google jQuery

These are: 这些是：

Decreased Latency 延迟减少
Increased parallelism 增加并行度
Better caching 更好的缓存

Snippet 片段

 <html> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <style type='text/css'> a.export, a.export:visited { text-decoration: none; color: #000; background-color: #ddd; border: 1px solid #ccc; padding: 8px; } </style> <script type='text/javascript'> //<![CDATA[ $(window).load(function() { $(document).ready(function() { function exportTableToCSV($table, filename) { // Temporary delimiter characters unlikely to be typed by keyboard // This is to avoid accidentally splitting the actual contents tmpColDelim = String.fromCharCode(11), // vertical tab character tmpRowDelim = String.fromCharCode(0), // null character // actual delimiter characters for CSV colDelim = '","', rowDelim = '"\\r\\n"'; // Grab text from table into CSV formatted var temp = ""; var d = document.getElementById("myTable"); var tmpColDelim = String.fromCharCode(11), // vertical tab character tmpRowDelim = String.fromCharCode(0); debugger; var numofRows = d.rows.length; for (var i = 0; i < numofRows; i++) { var row = ""; for (var j = 0; j < d.rows[i].cells.length; j++) { row = row + tmpColDelim + (d.rows[i].cells[j].innerText).replace('"', '""'); } temp = temp + tmpRowDelim + row; } temp = temp.split(tmpRowDelim).join(rowDelim) .split(tmpColDelim).join(colDelim); csv = '"' + temp + '"'; debugger; var newWin = window.open("about:blank", "_blank"); var doc = newWin.document; newWin.document.open("application/csv", "replace"); newWin.document.charset = "utf-8"; doc.write(csv); newWin.document.close(); newWin.document.execCommand("SaveAs", true, "data.csv"); newWin.close(); /* // Data URI var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv); alert(csvData); $(this) .attr({ 'download': filename, 'href': csvData, 'target': '_blank' });*/ } // This must be a hyperlink $(".export").on('click', function(event) { // CSV exportTableToCSV.apply(this, [$('#dvData>table'), 'data.csv']); // IF CSV, don't do event.preventDefault() or return false // We actually need this to be a typical hyperlink }); }); }); //]]> </script> </head> <body> <hr> <div id="dvData"> <table id="myTable" class="myClass"> <tr> <th>Column One</th> <th>Column Two</th> <th>Column Three</th> </tr> <tr> <td>row1 Col1</td> <td>row1 Col2</td> <td>row1 Col3</td> </tr> <tr> <td>row2 Col1</td> <td>row2 Col2</td> <td>row2 Col3</td> </tr> <tr> <td>row3 Col1</td> <td>row3 Col2</td> <td>row3 Col3</td> </tr> </table> </div> <br/> <a href="#" class="export" onclick="exportTableToCSV()">Export Table data into Excel</a> <br/> <br/> <!-- Notes below --> <hr> <p>Notes</p> <ul> <li>To write in new document and download the csv format without jQuery</li> </ul> </body> </html>

fiddle 小提琴

似乎无法让此jsfiddle在本地工作...？

问题描述

1 个解决方案

解决方案1
1 2015-02-26 15:50:17

似乎无法让此jsfiddle在本地工作...？

问题描述

1 个解决方案

解决方案1 1 2015-02-26 15:50:17

解决方案1
1 2015-02-26 15:50:17