使用vue-html-to-paper打印b-table时出现巨大排序箭头的问题求助

解决方案 #

这个问题是vue-html-to-paper打印时没有完整加载Bootstrap Table的约束样式，导致b-table排序图标使用的伪元素尺寸失控被放大，你之前设置sortIcon: null不生效是因为没有显式关闭列的可排序属性，可按以下步骤修复：

1. 首先给所有<b-table-column>添加sortable="false"属性，显式关闭列排序功能，从根源避免排序图标渲染：

<b-table
  :data="selectedShipment.shipmentDetailList"
  :header-props="{ sortIcon: null }"
>
  <b-table-column
    field="productId"
    label="ID Produk"
    v-slot="props"
    sortable="false"
  >
    {{ props.row.product.productId }}
  </b-table-column>
  <!-- 其余所有列都加上sortable="false"属性 -->
</b-table>

2. 加入打印专用CSS强制隐藏排序图标，避免伪元素残留渲染：
   你可以直接在全局样式中加入打印媒体查询样式：

@media print {
  .b-table .sort-icon,
  .b-table th::before,
  .b-table th::after {
    display: none !important;
    content: none !important;
  }
}

如果全局样式不生效，说明vue-html-to-paper打印时没有加载全局样式，直接在插件注册时传入自定义打印样式即可：

// main.js中注册vue-html-to-paper的配置
import VueHtmlToPaper from 'vue-html-to-paper';

const printOptions = {
  styles: [
    // 保留你原有的Bootstrap样式引入
    '/path/to/bootstrap.min.css'
  ],
  // 新增强制隐藏排序图标的样式
  css: `
    .b-table .sort-icon,
    .b-table th::before,
    .b-table th::after {
      display: none !important;
      content: none !important;
    }
  `
}
Vue.use(VueHtmlToPaper, printOptions);

做完以上两步后再触发打印，异常箭头就会消失。

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