适用于JSFiddle,但不适用于本地?

时间:2015-02-27 13:33:59

标签: javascript jquery jsfiddle

这个jsfiddle适合我http://jsfiddle.net/xzZ7n/1/但是,当我尝试在本地或从Sharepoint运行时,当我按下pdf按钮时没有任何反应。
任何想法为什么会这样?这是我的代码:



    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> - jsFiddle demo</title>
      
      <script type='text/javascript' src='//code.jquery.com/jquery-git.js'></script>
      
      
      
      
      <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      
        
          <script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        
      
        
          <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        
      
        
          <script type='text/javascript' src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
        
      
      <style type='text/css'>
        
      </style>
      
    </head>
    <body>
      <div id="customers">
        <table id="tab_customers" class="table table-striped">
            <colgroup>
                <col width="20%">
                    <col width="20%">
                        <col width="20%">
                            <col width="20%">
            </colgroup>
            <thead>
                <tr class='warning'>
                    <th>Country</th>
                    <th>Population</th>
                    <th>Date</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Chinna</td>
                    <td>1,363,480,000</td>
                    <td>March 24, 2014</td>
                    <td>19.1</td>
                </tr>
                <tr>
                    <td>India</td>
                    <td>1,241,900,000</td>
                    <td>March 24, 2014</td>
                    <td>17.4</td>
                </tr>
                <tr>
                    <td>United States</td>
                    <td>317,746,000</td>
                    <td>March 24, 2014</td>
                    <td>4.44</td>
                </tr>
                <tr>
                    <td>Indonesia</td>
                    <td>249,866,000</td>
                    <td>July 1, 2013</td>
                    <td>3.49</td>
                </tr>
                <tr>
                    <td>Brazil</td>
                    <td>201,032,714</td>
                    <td>July 1, 2013</td>
                    <td>2.81</td>
                </tr>
            </tbody>
        </table>
    </div>
    <button onclick="javascript:demoFromHTML();">PDF</button>
      
    
    
    <script type='text/javascript'>//<![CDATA[ 
    
    function demoFromHTML() {
        var pdf = new jsPDF('p', 'pt', 'letter');
        // source can be HTML-formatted string, or a reference
        // to an actual DOM element from which the text will be scraped.
        source = $('#customers')[0];
    
        // we support special element handlers. Register them with jQuery-style 
        // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
        // There is no support for any other type of selectors 
        // (class, of compound) at this time.
        specialElementHandlers = {
            // element with id of "bypass" - jQuery style selector
            '#bypassme': function (element, renderer) {
                // true = "handled elsewhere, bypass text extraction"
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 40,
            width: 522
        };
        // all coords and widths are in jsPDF instance's declared units
        // 'inches' in this case
        pdf.fromHTML(
        source, // HTML string or DOM elem ref.
        margins.left, // x coord
        margins.top, { // y coord
            'width': margins.width, // max width of content on PDF
            'elementHandlers': specialElementHandlers
        },
    
        function (dispose) {
            // dispose: object with X, Y of the last line add to the PDF 
            //          this allow the insertion of new lines after html
            pdf.save('Test.pdf');
        }, margins);
    }
    //]]>  
    
    </script>
    
    
    </body>
    
    
    </html>
&#13;
&#13;
&#13;

知道为什么不起作用?谢谢!

1 个答案:

答案 0 :(得分:1)

<head />中包含的大部分依赖关系网址都已损坏,因为您省略了部分网址:您需要添加一些http://以获取有效的远程网址。

                            here ------|
<head>                                 v
  <script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <!-- Same thing for other libraries you use... -->
</head>

您也忘了在<head>标记的开头添加jQuery。

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
</head>