vue3-print-nb打印el-table表格不全的问题

根据提供的引用内容，解决vue3-print-nb打印el-table表格不全的问题有两种方式：

1. 添加table样式：

table {
  table-layout: auto !important;
}
.el-table__header {
  width: 100% !important;
}
.el-table__body {
  width: 100% !important;
}

2. 使用局部打印，并添加样式覆盖原来的table的宽度样式：

<div id="printData">
  <style scoped>
    ::v-deep .el-table {
      margin-top: 10px;
      table {
        width: 100% !important;
      }
      .el-table__body,
      .el-table__header {
        width: 100% !important;
      }
      .el-table__body {
        width: 100% !important;
      }
    }
  </style>
  <!-- el-table内容 -->
</div>

相关问题

vue-print-nb打印el-table其中el-table-column超出范围

Vue Print Nb是一个用于 Vue.js 应用程序的库，它可以方便地将网页内容导出为 PDF 或其他预览格式。如果你想要打印 Element UI 的 el-table，并遇到列超出行的问题，那可能是由于默认的浏览器打印视口限制导致的。Element UI 的表格在打印时可能会根据屏幕大小调整布局，如果某些列的内容过长，它们可能不会像在屏幕上那样自动换行。

解决这个问题的一种方法是：

1. **设置固定宽度**：对于需要完整展示的内容列，可以设定固定的列宽，避免因内容长度影响打印布局。

<el-table-column label="标题" prop="content" :width="columnWidth" />

2. **自定义列样式**：你可以创建一个 CSS 类来处理打印样式，比如设置 `white-space: normal` 来允许文本换行，或者使用 `@media print` 规则针对打印环境调整样式。

.printable {
  white-space: normal !important;
}
@media print {
  .table-for-print {
    /* 添加适合打印的样式 */
  }
}

3. **数据截断**：对内容过长的数据，可以提供一个可点击的按钮，用户可以在打印前选择是否显示全部内容。

尽管如此，有些情况下，如果内容确实很长且无法适应常规的页面尺寸，你可能需要考虑使用分页功能或者优化数据结构，减少单次打印的数据量。

vue-print-nb打印el-table边框显示不全

问题的原因是在打印时，vue-print-nb插件默认不会打印el-table的边框。为了解决这个问题，你可以通过重新覆盖之前的CSS样式来显示边框。具体步骤如下：

1. 在CSS样式中添加以下代码，用于去除页脚和设置el-table的边框样式：

@page{
  size: auto;
  margin-bottom: 0mm; //去掉页脚
}

.el-table--mini .el-table__cell{
  border: 1px solid red !important; //设置表格边框样式
}

2. 在打印页面中引入上述的CSS样式文件。

通过以上步骤，你可以解决vue-print-nb打印el-table边框不显示的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue-print-nb 打印el-tabel表格时border不显示问题](https://blog.csdn.net/m0_69722446/article/details/131415945)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]