Vue html-to-paper 打印 b table 导致显示 GIANT 排序箭头

Question

我正在尝试使用 vue-html-to-paper 从网页打印 table，但是当我尝试打印时出现了巨大的箭头。

这是打印前的预览，一切正常。

但是当我打印时，我得到了这个。

我很确定这是因为 b-table 的 sortable 箭头图标，因此我试图删除 B 中的所有 sortable 功能-table。但它没有效果。这是我当前的代码，我只使用 bootstrap 而没有自定义 css.

这是我的 table 代码：

            <b-table
              :data="selectedShipment.shipmentDetailList"
              :header-props="{ sortIcon: null }"
            >
              <b-table-column
                field="productId"
                label="ID Produk"
                v-slot="props"
              >
                {{ props.row.product.productId }}
              </b-table-column>
              <b-table-column
                field="productName"
                label="Nama Produk"
                v-slot="props"
              >
                {{ props.row.product.productName }}
              </b-table-column>
              <b-table-column
                field="quantity"
                label="Kuantitas Dalam Kiriman"
                v-slot="props"
              >
                {{ props.row.quantity }}
              </b-table-column>
              <b-table-column
                field="receivedQuantity"
                label="Kuantitas Yang Diterima"
                v-slot="props"
              >
                {{ props.row.receivedQuantity }}
              </b-table-column>
            </b-table>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">
              Cancel Shipment
            </button>
            <button type="button" class="btn btn-success" data-dismiss="modal" @click="print">
              Print Shipment
            </button>
          </div>
        </div>

这是我的打印方法：

print() {
      // Pass the element id here
      this.$htmlToPaper("printShipmentBodyModal", () => {});
      console.log("Printing completed or was cancelled!");
    },

Answer 1

这是由 buefy 的一个名为 fontawsome 的 npm 插件引起的，其图标未按 CSS 设置样式，解决方案是将其删除。

Vue html-to-paper 打印 b table 导致显示 GIANT 排序箭头

Vue html-to-paper printing b table causes GIANT sort arrows to show up

javascript

css

twitter-bootstrap

vue-component

vuejs2