Window.print() 没有获取输入元素的全部值答案

【问题标题】：Window.print( ) not taking the entire value of input elementWindow.print() 没有获取输入元素的全部值
【发布时间】：2022-02-01 16:57:09
【问题描述】：

我有一个angular application，其中包含发票功能。 我使用引导模式来设计发票，您可以在下面的图片 "before print" 中看到它。在这张图片中，我在发票中添加了 2 项，但是当我继续使用 window.print() 打印发票模式时，我看到打印页面没有获取输入元素的全部值。

例如对于发票页面中的第一项，您可以看到输入为“Some Item - Black Color E Series 56565”的值，但在打印页面@ 987654328@ 仅将部分值设为“Some Item - Black Color E Se”，其余部分被隐藏。

页面左下角的“旁白”输入字段也会出现同样的情况。我们如何解决这个问题？

Note: I've used HTML input element for item as well as narration fields on an invoice page.

为了帮助您更多，我可以为您提供一些必要的代码库来理解这一点。看看代码，以及下面的两张图片。

1. Angular 组件代码库

// this print method is called on click of Save & Print button
print() {
    // first save the invoice and if save is successfull then give a print command
    this.invoiceService.create(this.invoice)
      .subscribe(
        result => {
        console.log(result);
        if(result) window.print(); // print the invoice only if it is successfully saved
      },
      (error: AppError) => {
        this.error = true;
        this.errorMsg = 'Error occurred.';
        return ;
      });
  }

2。 Style.css 代码库

@media print {
  html, body {
    height:100vh; 
    margin: 0 !important; 
    padding: 0 !important;
    overflow: hidden;
  }
  
  body * {
    visibility:hidden;
  }

  #printThis, #printThis * {
    visibility:visible;
  }

  .remove-item, .add-item, .modal-footer {
    display: none;
  }

  .hide-discount, .hide-freight {
    display: none;
  }

  .modal {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    overflow: visible!important;
  }

}

3. HTML 标记：

<div class="row">   
  <div class="items-table">
    <ng-container *ngFor="let item of items; let i=index;">
        <div class="row invoice-items" >
          <div class="col-4 input-container">
            <input [(ngModel)]="item.description" name="itemDescription" id="item" type="text" placeholder="Item name" >
          </div>
        </div>
    </ng-container>
  </div>
 </div>

4.发票页面输入元素的 CSS 样式：

.items-table input {
    line-height:1.5em;
}

input:focus {
    outline: 0;
}

.col-4.input-container input {
    width: 100%;
}

input:hover, textarea:hover, input:focus, textarea:focus {
    border: 1px solid #CCC;
}

这是我用于输入元素的最低限度的样式。

5.打印前的图像（发票模式页面）

6.图片点击保存&打印按钮后（实际打印页面）

【问题讨论】：

您需要提供实际发票的一些标记（一个最小示例）。模态在这里并不是真正的问题。这就是它里面的所有标记。
好的，为您提供一个 Item Name 输入字段标记以及我发票页面中输入元素的整个 css 代码库。
@disinfor 请查看上面更新的问题，现在可以使用所需的标记和 CSS 样式代码。

标签： html css angular

【解决方案1】：

Observation: 我想提醒您一件事，即问题主要是由于我们在打印页面时选择的页面大小造成的。当我将页面和布局的大小从纵向更改为横向时，反之亦然，我可以看到它正在根据页面上的可用空间接受字符。 然后，我尝试更改发票内容的字体大小，并再次尝试解决本案例中已解决的问题。

因此，发票页面上的字体大小也很重要，因为打印页面上的页面大小有限，因此内容不能保持更大。

您可以从https://stackoverflow.com/a/66593515/15684466 问题中获取参考以进行更多设置，例如page horizontal or vertical scaling 等。

下面，style.css 中的代码解决了我的问题。

@media print {
  html, body {
    font-size: 75%; /* Fixed invoice print page content issue */
  }
}

具有适当内容的图片：

【讨论】：