Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

127
Visualizações
Vue html-to-paper printing b table causes GIANT sort arrows to show up

Im trying to print a table from a webpage using vue-html-to-paper, but when I try to print giant arrows show up.

This is the preview before printing, all is well. enter image description here

But when I print, i get this. enter image description here

I'm pretty sure this is because of the sortable arrow icon of the b-table, hence i have tried to remove all sortable functionality in the B-table. But it has no effect. This is my current code, im using only bootstrap and no custom css.

This is my table code:

            <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>

Here is my print method:

print() {
      // Pass the element id here
      this.$htmlToPaper("printShipmentBodyModal", () => {});
      console.log("Printing completed or was cancelled!");
    },
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

This was caused by an npm plugin called fontawsome for buefy, its icons were not getting styled by CSS, the solution was to remove them .

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda