npm install print-js --save

<template>
  <div>
    <!-- 打印區(qū)域 -->
    <div id="invoiceContent">
      <h3>訂單發(fā)票</h3>
      <p>訂單號(hào)：{{ orderId }}</p>
      <!-- 更多訂單內(nèi)容 -->
    </div>
    
    <button @click="printInvoice">打印發(fā)票</button>
  </div>
</template>

<script>
import printJS from 'print-js'

export default {
  data() {
    return {
      orderId: '20231027001'
    }
  },
  methods: {
    printInvoice() {
      printJS({
        printable: 'invoiceContent',
        type: 'html',
        header: '銷售發(fā)票',
        style: `
          h3 { color: #333; }
          p { margin: 10px 0; }
        `
      })
    }
  }
}
</script>

// 打印表格數(shù)據(jù)
const tableData = [
  { name: '商品A', price: 99, quantity: 2 },
  { name: '商品B', price: 199, quantity: 1 }
]
printJS({
  printable: tableData,
  type: 'json',
  properties: ['name', 'price', 'quantity'],
  header: '訂單明細(xì)',
  gridStyle: 'border: 1px solid #ddd;'
})

// 打印服務(wù)器上的PDF文件
printJS({
  printable: '/api/invoices/20231027.pdf',
  type: 'pdf',
  showModal: true
})

/* 在Vue組件中 */
<style scoped>
/* 屏幕樣式 */
.invoice-table {
  width: 100%;
}

/* 打印專用樣式 */
@media print {
  .no-print {
    display: none !important;
  }
  
  .invoice-table {
    font-size: 12pt !important;
    page-break-inside: avoid;
  }
}
</style>

import { printHtml } from 'web-print-pdf'

// 靜默打印核心示例
async function silentPrint(content) {
  await printHtml({
    content: content,           // HTML內(nèi)容
    silent: true,               // 關(guān)鍵：無(wú)預(yù)覽彈窗
    printer: 'Office_Printer',  // 指定打印機(jī)
    copies: 2                   // 打印份數(shù)
  })
}

// 在Vue方法中調(diào)用
methods: {
  async handleBatchPrint() {
    // 批量靜默打印訂單
    for (const order of this.orders) {
      await silentPrint(this.generateOrderHtml(order))
    }
  }
}

// 可根據(jù)需求靈活選擇
class PrintService {
  constructor(config) {
    // 根據(jù)配置選擇打印方案
    this.useProfessional = config.silentPrint || config.batchPrint
  }
  
  print(content) {
    if (this.useProfessional) {
      // 使用web-print-pdf
      return this.professionalPrint(content)
    } else {
      // 使用printjs
      return this.basicPrint(content)
    }
  }
}

/* 通用打印樣式重置 */
@media print {
  body {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* 隱藏不需要打印的元素 */
  .no-print, .action-buttons, .sidebar {
    display: none !important;
  }
  
  /* 確保打印內(nèi)容完整顯示 */
  .print-content {
    width: 100% !important;
    max-width: none !important;
  }
}

// 增強(qiáng)打印健壯性
async function safePrint(printFunction, content) {
  try {
    await printFunction(content)
    this.$message.success('打印任務(wù)已發(fā)送')
  } catch (error) {
    console.error('打印失敗:', error)
    this.$message.error(`打印失敗: ${error.message}`)
    
    // 可選：回退到printjs方案
    if (error.code === 'PRINTER_UNAVAILABLE') {
      this.fallbackToPrintJS(content)
    }
  }
}