Estoy tratando de imprimir una tabla desde una página web usando vue-html-to-paper, pero cuando intento imprimir aparecen flechas gigantes.
Esta es la vista previa antes de imprimir, todo está bien.
Pero cuando imprimo, obtengo esto.
Estoy bastante seguro de que esto se debe al icono de flecha clasificable de la tabla B, por lo tanto, he intentado eliminar toda la funcionalidad clasificable en la tabla B. Pero no tiene efecto. Este es mi código actual, estoy usando solo bootstrap y no css personalizado.
Este es mi código de tabla:
<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>
Aquí está mi método de impresión:
print() { // Pass the element id here this.$htmlToPaper("printShipmentBodyModal", () => {}); console.log("Printing completed or was cancelled!"); },
Esto fue causado por un complemento npm llamado fontawsome para buefy, sus íconos no estaban siendo diseñados por CSS, la solución fue eliminarlos.