Question

这个jsfiddle似乎对我来说很好，但是当我尝试复制时它不起作用，当我按下按钮时没有任何反应？

这是我的代码：

<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>

知道为什么吗？

谢谢！ -warfo09

Answer 1

您在代码中使用了jquery，但尚未将其包含在您的代码中。

添加

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

到你的<head>声明。

注意

这允许谷歌为您托管jquery，而您可能希望为方便起见，从下载的jquery版本中添加引用。但是，有3 reasons why you should let google host jquery for you

这些是：

延迟减少
增加并行度
更好的缓存

<强>段

<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 个答案: