Window.print()以javascript、angular的形式输入文本

Question

我有以下html代码，它由一个表单组成，包含不同类型的字段：

<div class="card-body" id="print">
<form [formGroup]="form">
<div class="text-muted" *ngFor="let field of category.fields">
<h5>
{{ field.name }}
</h5>
<ng-container *ngIf="field.type === 'text' || field.type === 'number'" >
<input
formControlName="{{ field.key }}"
type="{{ field.type }}"
class="form-control"
placeholder="{{ field.name }}"
/>
</ng-container>
<ng-container *ngIf="field.type === 'textarea'">
<textarea
formControlName="{{ field.key }}"
class="form-control"
placeholder="Comments"
></textarea>
</ng-container>
<ng-container *ngIf="field.type === 'date'">
<div
class="input-group"
>
<input
formControlName="{{ field.key }}"
ngbDatepicker
#dateField="ngbDatepicker"
type="text"
class="form-control"
placeholder="DD/MM/YYYY"
/>
<div class="input-group-append">
<div
class="input-group-text"
(click)="dateField.toggle()"
>
<i
class="fa fa-calendar"
style="cursor: pointer;"
></i>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="field.type === 'dropdown'">
<select
class="custom-select"
formControlName="{{ field.key }}"
>
<option [ngValue]="null">
Select {{ field.name }}
</option>
<option
*ngFor="let option of field.options"
[ngValue]="option.value"
>
{{ option.label }}
</option>
</select>
<br />
</ng-container>
<ng-container
*ngIf="field.type === 'checkbox_multi_choice'"
>
<div
class="form-check mb-1"
*ngFor="let option of field.options"
>
<p-checkbox
class="mr-1"
[formControl]="form.controls[field.key]"
[value]="option.value"
></p-checkbox>
<label class="form-check-label"
>{{ option.label }}</label
>
</div>
</ng-container>
<ng-container *ngIf="field.type === 'radio'">
<div
class="form-check"
*ngFor="let option of field.options"
>
<input
type="radio"
[value]="option.value"
formControlName="{{ field.key }}"
class="form-check-input"
/>
<label class="form-check-label"
>{{ option.label }}</label
>
</div>
</ng-container>
</div>
</ng-container>
</ng-container>
</div>
</form>
</div>

我正在尝试使用以下函数window.print此表单：

download() {
var printContents = document.getElementById("print").innerHTML;
document.body.innerHTML = printContents;
window.print();
location.reload();
}

它工作正常，除了不是所有的输入字段值都显示在打印中。仅显示"checkbox_multi_choice"值。

经过一些研究，window.print((似乎没有捕获输入字段值，所以有办法解决这个问题吗？当我打开window.print((时，如何使值显示在框中？

编辑！！！

感谢@majusebetter，我已经显示了文本框，但它仍然没有显示单选按钮的内容。下面是到目前为止的代码，有人能帮助我如何编辑它以使单选按钮工作吗？

download() {
let element: any = document.getElementById("print");
const iframe = document.body.appendChild(document.createElement("iframe"));
iframe.style.display = "none";
const idoc = iframe.contentDocument;
idoc.head.innerHTML = document.head.innerHTML;
idoc.body.innerHTML = element.innerHTML;
const inputs = element.querySelectorAll("input");
const printInputs = idoc.body.querySelectorAll("input");
for (let i = 0; i < inputs.length; i++) {
printInputs[i].value = inputs[i].value;
}
const selects = element.querySelectorAll("select");
const printSelects = idoc.body.querySelectorAll("select");
for (let i = 0; i < selects.length; i++) {
printSelects[i].value = selects[i].value;
}
window.setTimeout(() => {
iframe.contentWindow.print();
document.body.removeChild(iframe);
}, 1000);
}

Answer 1

您可以将要打印的HTML与样式一起复制到IFRAME元素，然后将输入/选择值从源元素复制到IFRAME:中的目标元素

print(element: HTMLElement): void {
const iframe = document.body.appendChild(
document.createElement('iframe'));
iframe.style.display = 'none';
const idoc = iframe.contentDocument;
idoc.head.innerHTML = document.head.innerHTML;
idoc.body.innerHTML = element.innerHTML;
const inputs = element.querySelectorAll('input');
const printInputs = idoc.body.querySelectorAll('input');
for (let i = 0; i < inputs.length; i++) {
printInputs[i].value = inputs[i].value;
printInputs[i].checked = inputs[i].checked;
}
const selects = element.querySelectorAll('select');
const printSelects = idoc.body.querySelectorAll('select');
for (let i = 0; i < selects.length; i++) {
printSelects[i].value = selects[i].value;
}
window.setTimeout(() => {
iframe.contentWindow.print();
document.body.removeChild(iframe);
}, 1000);
}

编辑添加单选按钮代码：

printInputs[i].checked = inputs[i].checked;