Print.Js網(wǎng)頁打印標簽詳細代碼示例

更新時間：2025年06月28日 08:54:13 作者：許多寶滴IT

Print.js一個小的javascript庫,可幫助您從網(wǎng)絡(luò)上打印,這篇文章主要介紹了Print.Js網(wǎng)頁打印標簽的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1、功能背景需求

后臺讀取數(shù)據(jù)，預覽頁面再打印出小標簽，涉及打印機設(shè)置紙張大小，與代碼編寫兼容等等

2、打印機設(shè)置紙張大?。?/h2>
按照下圖順序設(shè)置需要打印的紙張大小，例如50mm*50mm

不知道，問產(chǎn)品打印的紙張大小是多少，再去設(shè)置！

3、相關(guān)代碼（PrintJS）

代碼頁面要準備一個預覽頁面，PrintJS打印時要綁定ID去打印。

3.1預覽打印效果圖：

3.2相關(guān)代碼：

<template>
  <!-- 網(wǎng)頁打印小票預覽頁 -->
  <div class="tick">
    <div class="tick-bg">
      <div id="print-tick">
        <div class="tick-bg-content" v-for="(item, index) in 1" :key="index">
          <div class="header">
            <b class="header-title">酸菜豬肉燉粉條長名就換行顯示..</b>
            <div class="header-price">
              <span>￥10.00</span>
              <span class="header-price-num">1份</span>
            </div>
          </div>
          <div class="body-address">住院部6F新生兒內(nèi)科②[番禺院區(qū)1]</div>
          <div class="footer">
            <div class="footer-flex">
              <span class="userName">張三</span>
              <span>1802****704</span>
            </div>
            <div class="footer-page">{{ index+1 }}/2</div>
          </div>
        </div>
      </div>

      <el-button class="w-80 ps-origin-btn" size="mini" @click="convertToImageAndPrint">打印</el-button>
    </div>
  </div>
</template>

<script>
import print from 'print-js'

export default {
  created() {
    this.type = this.$route.query.type
    this.printList = JSON.parse(localStorage.printList)
    console.log('this.printList', this.printList)
  },
  data() {
    return {
      type: 'takeaway',
      printList: []
    }
  },
  methods: {
    // 確認打印
    convertToImageAndPrint() {
      print({
        printable: 'print-tick',
        type: 'html',
        scanStyles: false,
        // style: '@media print { body { margin: 0; padding: 0;}  .print-tick { margin: 0 auto; width: 100%;} }',
        css: 'data:text/css,' + encodeURIComponent(this.rechargeStyle())
      })
    },
    // 打印樣式
    rechargeStyle() {
      return `
        @page {
          width: 100%;
          margin: 0 !important;
          padding: 0 !important;
          box-sizing: border-box !important;
        }
        *, body {
          width: 100% !important;
          margin: 0 !important;
          padding: 0 !important;
          box-sizing: border-box !important;
          font-size: 16px !important;
        }
        #print-tick .tick-bg-content{
          padding: 0 18px !important;
        }
        #print-tick .header {
          width: 100% !important;
          padding-bottom: 5px !important;
          margin-bottom: 5px !important;
          border-bottom: 2px dashed #000 !important;
        }
        #print-tick .header .header-title{
          font-weight: bold !important;
          font-size: 18px !important;
          display: -webkit-box !important;
          display: -moz-box !important;
          overflow: hidden !important;
          line-clamp: 2 !important;
          -webkit-box-orient: vertical !important;
          -webkit-line-clamp: 2 !important;
          -moz-box-orient: vertical !important;
          -moz-line-clamp: 2 !important;
        }
        #print-tick .header .header-price{
          display: flex !important;
        }
        #print-tick .header-price .header-price-num{
          display: inline-block;
          padding-left: 10px;
        }
        #print-tick .body-address{
          width: 100% !important;
          margin-bottom: 5px !important;
          display: -webkit-box !important;
          display: -moz-box !important;
          overflow: hidden !important;
          line-clamp: 2 !important;
          -webkit-box-orient: vertical !important;
          -webkit-line-clamp: 2 !important;
          -moz-box-orient: vertical !important;
          -moz-line-clamp: 2 !important;
        }
        #print-tick .footer{
          padding-top: 5px !important;
          border-top: 2px dashed #000 !important;
        }
        #print-tick .footer .footer-flex{
          width: 100% !important;
          display: flex !important;
          justify-content: space-between !important;
          align-items: center !important;
        }
        #print-tick .footer .footer-page{
          display: flex !important;
          justify-content: end !important;
          padding-top: 10px !important;
        }

        @-moz-document url-prefix() {
          *, body {
            letter-spacing: -1px !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
            font-size: 16px !important;
          }
          #print-tick .tick-bg-content {
            padding:0 0 0 30px !important;
          }
          #print-tick .header .header-price{
            display: flex !important;
            margin-top: 10px !important;
          }
        }
      `
    }
  }
}
</script>

<style lang="scss" scoped>
.tick {
  &-bg {
    background-color: grey;
    min-height: 100vh;
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    #print-tick {
      font-size: 12px;
      line-height: 16px;
      font-weight: 500;
      .tick-bg-content {
        padding: 20px;
        margin: 0 auto;
        width: 290px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        margin-bottom: 20px;
        .header {
          width: 100%;
          padding-bottom: 10px;
          margin-bottom: 10px;
          border-bottom: 2px dashed #dddddd;
          .header-title {
            display: -webkit-box !important;
            display: -moz-box !important;
            overflow: hidden !important;
            line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            -webkit-line-clamp: 2 !important;
            -moz-box-orient: vertical !important;
            -moz-line-clamp: 2 !important;
          }
          .header-price {
            // margin-top: 10px;
            // transform: translate(100%, 0);
            // width: 50%;
            // display: flex;
            // justify-content: space-between;
            // align-items: center;
          .header-price-num{
              margin-top: 10px;
              display: inline-block;
              padding-left: 50px;
            }
          }
        }
        .body-address {
          width: 100%;
          margin-bottom: 10px;
          display: -webkit-box !important;
          -webkit-box-orient: vertical !important;
          -webkit-line-clamp: 2 !important;
          line-clamp: 2 !important;
          overflow: hidden !important;
        }
        .footer {
          width: 100%;
          border-top: 2px dashed #ddd;
          padding-top: 10px !important;
          .footer-flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          .footer-page {
            padding-top: 10px;
            display: flex;
            justify-content: end;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>

以上關(guān)鍵點在于print（）打印的方法，可能要注意的是打印時的樣式調(diào)整，每個瀏覽器要處理下樣式兼容問題，火狐比較特殊點，也做了打印時的樣式特殊處理如下：

@-moz-document url-prefix() {
          *, body {
            letter-spacing: -1px !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
            font-size: 16px !important;
          }
          #print-tick .tick-bg-content {
            padding:0 0 0 30px !important;
          }
          #print-tick .header .header-price{
            display: flex !important;
            margin-top: 10px !important;
          }
        }