2017-02-11 1 views
0

캔버스 요소를 인쇄하기 위해 웹 페이지에 "내용 인쇄"단추를 추가하려고 시도했지만 캔버스 내용 (벤치마킹, 스쿼트 등)에 따라 캔버스 내용 (운동 메트릭의 시각적 그래프)이 변경됩니다. 웹 페이지에 표시된 캔바스 내용을 인쇄 할 수 있습니다 (기본값으로 "squat"으로 설정).하지만 메트릭을 변경하고 "Apply Changes"버튼을 누르면 그래프 내용이 변경되지만 여전히 "Squat"내용이 인쇄됩니다. 내가 무엇을 하던지.캔버스 요소를 변경 한 후 캔버스 요소를 인쇄하는 방법?

도와 주시겠습니까?

<!-- BEGIN PRINT FUNCTION--> 
     <script type="text/javascript"> 
      $(function print_content(){ 

      var canvas=document.getElementById("exerciseChart"); 

      if(document.getElementById('submitButton').clicked == true) { 
       var win=window.open(); 
        win.document.write("<br><img src='"+canvas.toDataURL()+"'/>"); 
        win.print(); 
        win.location.reload(); 

        $("#printContent").click(function(){ print_content(); }); 
      }else { 
        var win=window.open(); 
        win.document.write("<br><img src='"+canvas.toDataURL()+"'/>"); 
        win.print(); 
        win.location.reload(); 

        $("#printContent").click(function(){ print_content(); }); 
        }); // end $(function(){}); 
       }; 
     </script> 
<h3 align="center" > Resistance Exercise Reports </h3> 
    </section> 
    <!-- This chart.js file is the backbone of the chart visuals. --> 
    <script src='Chart.js/Chart.js'></script> 
    <div id="linechartparent"> 
     <!-- This is the canvas that is edited by chartJsBacked --> 
     <canvas id='exerciseChart' height='250' ></canvas> 
    </div> 
    <!-- This is where the javascript is inserted--> 
    <script type="text/javascript" src="chartJsBackend.js"></script> 
    <form name = "chartParameters" class="chartParameters" id="chartForm"> 
    <?php 
      // If the user is a coach, give them the option to choose which athlete's results they're seeing. 
      if($_SESSION['isCoach'] == true){ 
       echo("<p> <select name='selectedUser'>"); 
      $category = mysqli_query($conn, "SELECT username FROM playerinfo WHERE Active = '0'"); 
      while ($row = $category->fetch_assoc()){ 
       echo "<option value='" . $row['username'] . "'>" . $row['username'] . "</option>"; 
      } 
      } 
      echo("</select>"); 
      ?> 
     <div class="InfoSelect"> 
      <select name='workoutRange'> 
       <option value="1">1 week</option> 
       <option value="4">1 month</option> 
       <option value="12">3 months</option> 
       <option value="24">6 months</option> 
       <option value="52">1 year</option> 
       <option value="4096" selected="selected">All time</option> 
      </select> 
      <select name='exercise'> 
       <option value="squat">Squat</option> 
       <option value="deadlift">Dead Lift</option> 
       <option value="powerpull">Power Pull</option> 
       <option value="bench">Bench</option> 
      </select> 

      <!-- When this button is pressed, reload the canvas--> 
      <button type="button" id="submitButton" name="submitButton" >Apply Change</button> 
      <button id="printContent">Print Content</button> 
     </div> 
    </form> 

답변

0

당신은 그들과 같이 인쇄하기 전에이라고 window.onbeforeprintwindow.matchMedia("print")에 그리기 기능을 등록 할 수 있습니다 : 여기

는 코드입니다.

function ready(){ 
    //your own canvas drawing code 
} 
window.onbeforeprint = ready; 
if(window.matchMedia){ 
    window.matchMedia("print").addListener(
     mql => mql.matches ? ready() : null 
    ); 
} 

This은 저의 샘플입니다.

관련 문제