我有以下 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);
}
uj5u.com熱心網友回復：
您可以將要列印的 HTMLIFRAME與樣式一起復制到元素，然后將輸入/選擇值從源元素復制到目標元素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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/518190.html