Vue.js中vue-good-table字体大小修改及打印右侧截断问题求助

一、修改表格字体大小 #

问题核心是Vue的scoped样式无法穿透到vue-good-table的内部DOM元素，导致设置的字体样式不生效。

解决方法：使用深度选择器突破scoped限制，直接作用于表格的单元格：

<style scoped>
@media screen {
  /* 针对屏幕显示的字体大小 */
  ::v-deep .vgt-table td,
  ::v-deep .vgt-table th {
    font-size: 10px;
  }
}
@media print {
  /* 针对打印的字体大小 */
  ::v-deep .vgt-table td,
  ::v-deep .vgt-table th {
    font-size: 12px;
  }
  .printOnly {
    display: block;
  }
}
</style>

注：若使用低版本Vue，可替换::v-deep为/deep/，作用完全一致。

二、解决打印时表格右侧内容截断问题 #

问题根源 #

1. 直接替换document.body.innerHTML会丢失原页面的全局样式，导致表格布局失效；
2. 表格宽度超出打印页面默认宽度，未做适配；
3. 打印边距未合理设置。

解决方案 #

方案1：优化打印函数，避免破坏原页面DOM

改用临时iframe承载打印内容，保留样式同时不影响原页面：

printContent() {
  const printableElement = document.getElementById("printable-content");
  // 创建打印内容容器
  const printContainer = document.createElement('div');
  printContainer.innerHTML = `
    <br>
    <div style="font-weight: bold; font-size: 25px; text-align: center; margin-bottom: 15px;">Despatched to Trelleborg</div>
    ${printableElement.innerHTML}
  `;
  // 添加打印专用样式
  const printStyle = document.createElement('style');
  printStyle.textContent = `
    @media print {
      body { margin: 0; padding: 0.5cm; }
      .vgt-table {
        width: 100% !important;
        table-layout: fixed;
      }
      .vgt-table td, .vgt-table th {
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 12px;
      }
      .printOnly { display: block; }
    }
  `;
  // 创建隐藏iframe
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  iframeDoc.head.appendChild(printStyle);
  iframeDoc.body.appendChild(printContainer);
  
  // 延迟打印确保内容加载完成
  setTimeout(() => {
    iframe.contentWindow.print();
    document.body.removeChild(iframe);
  }, 100);
}

方案2：补充打印媒体查询样式

在原样式中添加表格适配规则：

<style scoped>
/* 原有样式保留 */
@media print {
  body {
    margin: 0;
    padding: 0.5cm; /* 设置打印边距 */
  }
  ::v-deep .vgt-table {
    width: 100% !important;
    table-layout: fixed; /* 固定布局防止列宽溢出 */
  }
  ::v-deep .vgt-table td, ::v-deep .vgt-table th {
    font-size: 12px;
    word-wrap: break-word; /* 长文本自动换行 */
    overflow-wrap: break-word;
  }
  .printOnly {
    display: block;
  }
}
</style>

内容的提问来源于stack exchange，提问作者joa