前端实现PDF分页打印+条形码功能

1. PDF打印，安装插件: vue-print-nb

2. 条形码，安装插件: vue-barcode

3. main.js 引入Print import Print from 'vue-print-nb' Vue.use(Print)

4. 打印PDF页面

<script>
import VueBarcode from 'vue-barcode';

export default {
  components: {
    VueBarcode
  },
  props: {},
  data() {
    return {
        // 条形码属性
      barcodeOption: {
        displayValue: false, //是否默认显示条形码数据
        background: '#fff', //条形码背景颜色
        height: '25px',
        fontSize: '10',
        lineColor: '#606266',
      },
      dataSource: [],
      count: 0,
      queryParam: {
      },
      columns: [
        {
          label: '单据编号',
          prop: 'formCode',
        },
        {
          label: '凭证编号',
          prop: 'externalVoucherCodes',
        },
        {
          label: '包含纸质发票',
          prop: 'hasInvoice',
          width: '110',
        },
        {
          label: '归档时间',
          prop: 'archiveDate',
          width: '120',
        },
        {
          label: '归档码',
          prop: 'archiveCode',
          width: '150',
        },
        {
          label: '操作人',
          prop: 'updateUserName',
          width: '80',
        },
      ],
    };
  },
  created() {
    // 从缓存获取数据 
    const queryList = JSON.parse(window.localStorage.getItem('list'));
    this.dataSource = queryList;
    // this.count 作为表格分页使用, ceil:向上取整
    this.count = Math.ceil(this.dataSource.length / 20);
  },
};
</script>

<style lang="less" scoped>
.archivePic {
  text-align: center;
  width: 160px;
  height: 480px;
  margin-top: 20px;
  border: 1px solid #333;
  font-weight: 550;
  .barcode-sty {
    transform: rotate(90deg);
    margin: 60px auto 80px;
  }
}
// 打印媒体查询
@media print {
  @page {
    // portrait, landscape
    size: auto;
    margin: 3mm;
  }
  body {
    height: auto;
  }
  .printPage {
    height: 291mm;   //分页  根据实际
    position: relative;
    &::before {
      position: absolute;
      content: 'hhh';
      top: 20%;
      right: 5%;
      font-size: 48px;
      opacity: .1;
      transform: rotate(30deg);
    }
    &::after {
      position: absolute;
      content: '';
      bottom: 20%;
      left: 5%;
      font-size: 48px;
      opacity: .1;
      transform: rotate(30deg);
    }
  }
}
</style>

补充说下: 扫码枪的使用，扫码枪连接电脑后，将光标放在输入框里面即可。扫码枪自带enter事件。在 input绑定enter事件即可。