Question

我正在尝试添加＆＃34;打印内容＆＃34;按钮到网页以打印画布元素，但画布内容（锻炼指标的可视图形）根据选择的锻炼（长凳，深蹲等）而变化。我可以打印网页上显示的画布内容（设置为＆＃34; squat＆＃34;默认情况下），但在我更改指标并点击＆＃34;应用更改＆＃34;按钮，图形内容发生了变化，但我仍然打印了＆＃34; Squat＆＃34;内容，无论我做什么。

你能帮忙吗？

以下是代码：

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

Answer 1

您可以将打印功能注册到window.onbeforeprint，并在打印前调用它们window.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是我的样本。

如何在画布元素更改后打印画布元素？

1 个答案: