Question

我正在尝试打印表单数据。文本框内的所有数据都会出现在打印预览中，但单选按钮和复选框除外。只有标签显示单选按钮和复选框。

当我在页面中查看时，单选按钮被选中。但是，如果我在预览中单击打印按钮，并且在打印后没有选择单选按钮值，则仅显示标签，如男性女性。任何人都可以告诉我如何将选择的单选按钮的值添加到打印预览中吗？

document.getElementById("btnPrint").onclick = function() {
  printElement(document.getElementById("printThis"));
  var modThis = document.querySelector("#printThis");
  window.print();
}

function printElement(elem) {
  var domClone = elem.cloneNode(true);
  var $printThis = document.getElementById("printThis");
  $printThis.innerHTML = "";
  $printThis.appendChild(domClone);
}

@media print {
  body * {
    visibility: hidden;
  }
  #printThis,
  #printThis * {
    visibility: visible;
  }
  #printThis {
    position: absolute;
    left: 0;
    top: 0;
  }
}

<div id="printThis">
  <div class="col-md-2">
    <button class="btn btn-info" type="button" id="btnPrint">Print</button>
  </div>
  <div class="margin-top-8">
    <label class="control control--radio">Male
        <input type="radio" name="gender" value="male" ng-model="formData.gender">
        <div class="control__indicator"></div>
        </label>
    <label class="control control--radio">Female
        <input type="radio" name="gender" value="female" ng-model="formData.gender">
        <div class="control__indicator"></div>
        </label>
  </div>
</div>

Answer 1

只需将此添加到您的样式中即可解决您的问题：

@media print {
  .mat-radio-inner-circle {
    box-shadow: 0 0 0 1000px #00695C inset !important;
  }
}

在您的代码中：

document.getElementById("btnPrint").onclick = function() {
  printElement(document.getElementById("printThis"));
  var modThis = document.querySelector("#printThis");
  window.print();
}

function printElement(elem) {
  var domClone = elem.cloneNode(true);
  var $printThis = document.getElementById("printThis");
  $printThis.innerHTML = "";
  $printThis.appendChild(domClone);
}

@media print {
  body * {
    visibility: hidden;
  }
  #printThis,
  #printThis * {
    visibility: visible;
  }
  #printThis {
    position: absolute;
    left: 0;
    top: 0;
  }
  .mat-radio-inner-circle {
    box-shadow: 0 0 0 1000px #00695C inset !important;
  }
}

<div id="printThis">
  <div class="col-md-2">
    <button class="btn btn-info" type="button" id="btnPrint">Print</button>
  </div>
  <div class="margin-top-8">
    <label class="control control--radio">Male
        <input type="radio" name="gender" value="male" ng-model="formData.gender">
        <div class="control__indicator"></div>
        </label>
    <label class="control control--radio">Female
        <input type="radio" name="gender" value="female" ng-model="formData.gender">
        <div class="control__indicator"></div>
        </label>
  </div>
</div>

在window.print（）中没有选择单选按钮

1 个答案: