【问题标题】:Trouble printing a specific div无法打印特定的 div
【发布时间】:2015-09-09 04:48:38
【问题描述】:

我正在尝试打印具有一些复选框的特定 div。我正在使用从 db 接收的数据通过 jQuery 在页面加载时检查这些复选框。

问题是当我尝试打印 div 时,复选框仍未选中。 IE。 jQuery 检查不会影响打印视图。

下面是我打印 div 的代码

$(function () {
    $("#btnPrint").click(function () {
        var contents = $("#printDiv").html();
        var frame1 = $('<iframe />');
        frame1[0].name = "frame1";
        $("body").append(frame1);
        var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
        frameDoc.document.open();
        //Create a new HTML document.
        frameDoc.document.write('<html><head><title>DIV Contents</title>');
        frameDoc.document.write('</head><body>');
        //Append the external CSS file.
        frameDoc.document.write('<link href="css/carousel.css" rel="stylesheet" type="text/css">');
        frameDoc.document.write('<link href="css/activities_folder.css" rel="stylesheet" type="text/css">');
        //Append the DIV contents.
        frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
        frameDoc.document.close();
        setTimeout(function () {
            window.frames["frame1"].focus();
            window.frames["frame1"].print();
            frame1.remove();
        }, 500);
    });
});

要打印的div如下

<div id="printDiv" >
  <p class="ques"><strong>1.    Parental conflict affects children in different ways. Have you observed any of these signs in your child recently? </strong></p>
  <ul class="filters">
    <li class="col-xs-12">
      <label>
        <input type="checkbox" name="q1" value="Increased anger issues" disabled>
        <span class="icon"><i class="fa fa-check"></i></span>
        <span>Increased anger issues</span>
      </label>
    </li>
    <li class="col-xs-12">
      <label>
        <input type="checkbox" name="q1" value="Violent or criminal behavior" disabled>
        <span class="icon"><i class="fa fa-check"></i></span>
        <span>Violent or criminal behavior</span>
      </label>
    </li>
    <li class="col-xs-12">
      <label>
        <input type="checkbox" name="q1" value="Depression & loneliness" disabled>
        <span class="icon"><i class="fa fa-check"></i></span>
        <span>Depression & loneliness</span>
      </label>
    </li>
    <li class="col-xs-12">
      <label>
        <input type="checkbox" name="q1" value="Withdrawal from friends & family" disabled>
        <span class="icon"><i class="fa fa-check"></i></span>
        <span>Withdrawal from friends & family</span>
      </label>
    </li>
    <li class="col-xs-12">
      <label>
        <input type="checkbox" name="q1" value="Poor academic performance" disabled>
        <span class="icon"><i class="fa fa-check"></i></span>
        <span>Poor academic performance</span>
      </label>
    </li>
    <li class="col-xs-12">
      <label>
        <input type="checkbox" name="q1" value="Health problems & medical conditions" disabled>
        <span class="icon"><i class="fa fa-check"></i></span>
        <span>Health problems & medical conditions</span>
      </label>
    </li>
    <li class="col-xs-12">
      <label>
        <input type="checkbox" name="q1" value="Low self-esteem, self-worth" disabled>
        <span class="icon"><i class="fa fa-check"></i></span>
        <span>Low self-esteem, self-worth</span>
      </label>
    </li>
  </ul>
</div>
<button id="btnPrint" value="Print" class="myPrintBtn">Print</button>

检查复选框的jquery代码是,

$(document).ready(function() {
    var currentAnsArray = ["Increased anger issues","Health problems & medical conditions"];

    $("input:checkbox[name=q1]").each(function(){

        for(var n=0; n < currentAnsArray.length; n++)
        {
            if($(this).val() == currentAnsArray[n])
            {
                $(this).prop('checked', true);
                break;
            }
        }
    });
});

编辑:编辑@Ovchynnykov 所说的currentAnsArray,以便更清楚地说明问题

请帮助..任何人???

【问题讨论】:

    标签: javascript html css checkbox printing


    【解决方案1】:

    似乎你在 currentAnsArray 中遇到了问题,因为当我做 jquery-1.11.3.min.js 时,其他一切都很好

    var currentAnsArray = ["Increased anger issues","Health problems & medical conditions"];
    

    代替

    var currentAnsArray = <?php $newArray1 = explode("|",$ans[0]); echo json_encode($newArray1); ?>;
    

    尝试在日志中打印 currentAnsArray。

    【讨论】:

    • 嘿,谢谢您的回复.. 但是 currentAnsArray 很好...复选框正在检查...问题是当我尝试打印该 div 时,打印预览不会显示检查。
    • 现在我明白了,但我在我的 Mac 上的 Chrome 中看到它们,可能因浏览器而异。您可以尝试在打印前用图片替换它们。
    猜你喜欢
    • 2021-01-09
    • 2012-10-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-05-24
    • 2018-07-19
    相关资源
    最近更新 更多