另存为PDF按钮点击触发多个下载

Question

我已经根据选择绘制图表，并可以使用按钮保存为pdf。 但是，当用户选择几次时，单击的按钮会根据选择的次数触发多次下载。它应该只触发1次下载，这是最新的选定图表。如何避免多次下载？

这是图表：

这是布局的代码：

<div class="chart-block-title">Job & Internship by Category</div> 
          <div class="chart-view" style="padding-top: 10px; padding-left: 10px"> 

           <!-- //combo box options to select application filter --> 
           <?php 
            echo 'Category Group: '; 
            echo '<select id="category_filter">'; 
            echo '<option value="0" selected="selected">Select</option>'; 
            echo '<option value="1">Accounting/Finance</option>'; 
            echo '<option value="2">Admin/Human Resources</option>'; 
            echo '<option value="3">Arts/Media/Communications</option>'; 
            echo '<option value="4">Building/Construction</option>'; 
            echo '<option value="5">Computer/Information Technology</option>'; 
            echo '<option value="6">Education/Training</option>'; 
            echo '<option value="7">Engineering</option>'; 
            echo '</select>'; 

           ?> 

          </div>     
          <div class="chart-view" id="categoryname_chart_div"></div> 
          <div class="chart-block-description">The bar chart shows the category of job & internship posted by linked companies</div> 
          <div class="chart-block-view"> 
           <input id="pdf-categoryname" type="button" value="Save as PDF" disabled /> 
          </div> 

这是代码绘制图表：

google.charts.setOnLoadCallback(drawCategoryNameChart); 


    function drawCategoryNameChart(){ 

       // for category-filter 
       $('#category_filter').on('change',function(){ 
       var select1 = $(this).val(); // category-filter value 
       var jsonCategoryNameData = $.ajax({ 
          url: "<?php echo $ajaxurl11; ?>", 
          contentType: "application/json", 
          data: {Value1 : select1}, 
          dataType: "json", 
          async: false 
          }).responseText; 

       var CategoryNameData = new google.visualization.DataTable(jsonCategoryNameData); 

       var optionsCategoryNameChart = { 
          //title: 'Job/Internship Distribution by Category', 
          titleTextStyle: { 
            color: 'Black', 
            fontSize: 18 
           }, 
           pieSliceText: 'none', 
          fontSize: '11', 
          hAxis: { 
            title: 'Category Name', 
           }, 
          vAxis: { 
            title: 'Total', 
            minValue: 0, 
            gridlines: {count: 4}  
           }, 
          legend: {textStyle: {color: '#464847', fontSize: 11}}, 
          tooltip: {isHtml: true}, 
          backgroundColor: '#F8F9FA', 
          colors: [ '#3B84BB', '#FFAF45', '#FFE345', '#0CAA63', '#1D40A6', '#F7AE12', '#F75012','#6944C3'], 
          chartArea: { 
            backgroundColor: { 
             stroke: '#fff', 
             strokeWidth: 1 
            } 
           }, 
          height: 300, 
          chartArea: { left:"5%",top:"20%",width:"80%",height:"50%" } 
           };   

       // Instantiate and draw our pie chart, passing in some options. 
       var CategoryNameChart = new google.visualization.ColumnChart(document.getElementById('categoryname_chart_div')); 
       google.visualization.events.addListener(CategoryNameChart, 'ready', function() { 
        btnSave.disabled = false; 
       }); 


       var btnSave = document.getElementById('pdf-categoryname'); 

       btnSave.addEventListener('', function() { 
        var doc = new jsPDF(); 
        doc.setFontSize(15); 
        doc.text(80, 25, "Jobs by Category"); 
        doc.addImage(CategoryNameChart.getImageURI(), 15, 30); 
        doc.setFontSize(9); 
        doc.text(55, 115, "The bar chart shows the category of job posted by linked companies"); 
        doc.save('category_name.pdf'); 
        }, false);  

       //draw the chart  
       CategoryNameChart.draw(CategoryNameData, optionsCategoryNameChart); 

       }); 


    } 

Answer 1

是有点麻烦，我已经重新调整过，请测试一下，如果还有问题，请告诉我是否错过任何东西

google.charts.setOnLoadCallback(drawCategoryNameChart); 

function drawCategoryNameChart() { 
    var CategoryNameData; //move out the variable 
    // for category-filter 
    $('#category_filter').on('change', function() { 
     var select1 = $(this).val(); // category-filter value 
     var jsonCategoryNameData = $.ajax({ 
       url: "<?php echo $ajaxurl11; ?>", 
       contentType: "application/json", 
       data: { 
        Value1: select1 
       }, 
       dataType: "json", 
       async: false //since this is async = false, we can ensure that this part will always run first 
      }).responseText; 

     //var CategoryNameData = new google.visualization.DataTable(jsonCategoryNameData); 
     CategoryNameData = new google.visualization.DataTable(jsonCategoryNameData); 
    }); 

    var optionsCategoryNameChart = { 
     //title: 'Job/Internship Distribution by Category', 
     titleTextStyle: { 
      color: 'Black', 
      fontSize: 18 
     }, 
     pieSliceText: 'none', 
     fontSize: '11', 
     hAxis: { 
      title: 'Category Name', 
     }, 
     vAxis: { 
      title: 'Total', 
      minValue: 0, 
      gridlines: { 
       count: 4 
      } 
     }, 
     legend: { 
      textStyle: { 
       color: '#464847', 
       fontSize: 11 
      } 
     }, 
     tooltip: { 
      isHtml: true 
     }, 
     backgroundColor: '#F8F9FA', 
     colors: ['#3B84BB', '#FFAF45', '#FFE345', '#0CAA63', '#1D40A6', '#F7AE12', '#F75012', '#6944C3'], 
     chartArea: { 
      backgroundColor: { 
       stroke: '#fff', 
       strokeWidth: 1 
      } 
     }, 
     height: 300, 
     chartArea: { 
      left: "5%", 
      top: "20%", 
      width: "80%", 
      height: "50%" 
     } 
    }; 

    // Instantiate and draw our pie chart, passing in some options. 
    var CategoryNameChart = new google.visualization.ColumnChart(document.getElementById('categoryname_chart_div')); 
    var btnSave = $('#pdf-categoryname'); 

    google.visualization.events.addListener(CategoryNameChart, 'ready', function() { 
     //btnSave.disabled = false; 
     btnSave.prop('disabled', false); 
    }); 

    btnSave.on('click', function(){ 
     var doc = new jsPDF(); 
     doc.setFontSize(15); 
     doc.text(80, 25, "Jobs by Category"); 
     doc.addImage(CategoryNameChart.getImageURI(), 15, 30); 
     doc.setFontSize(9); 
     doc.text(55, 115, "The bar chart shows the category of job posted by linked companies"); 
     doc.save('category_name.pdf'); 
    }); 

    // var btnSave = document.getElementById('pdf-categoryname'); 

    // btnSave.addEventListener('', function() { 
     // var doc = new jsPDF(); 
     // doc.setFontSize(15); 
     // doc.text(80, 25, "Jobs by Category"); 
     // doc.addImage(CategoryNameChart.getImageURI(), 15, 30); 
     // doc.setFontSize(9); 
     // doc.text(55, 115, "The bar chart shows the category of job posted by linked companies"); 
     // doc.save('category_name.pdf'); 
    // }, false); 

    //draw the chart 
    CategoryNameChart.draw(CategoryNameData, optionsCategoryNameChart); 

}