前端组件文档

# QPrint 打印

# 基础用法

提示

1.必须依赖组件Q-Water

2.可以使用Q-Table

3.隐藏打印内容 class='hidden'

@media print {
    .hidden {
        display: none;
    }
}


<QPrint :printProps="printConfig" :showWater="false">
  <QTable
      :data="tableData"
      :columns="tableColumns"
      :paginate="false"
      :ellipsis="false"
  >
    <template v-slot:supplier.supplierName="{ row }">
      <span>{{ row.supplier.supplierName }}</span>
    </template>
  </QTable>
</QPrint>
<script>

  export default {
    data() {
      return {
        printConfig: {
          id: 'dynamicPrintDiv',
          // 其他打印对象配置
        },
        tableData: [
          {
            id: 1,
            date: "2022-01-01",
            supplier: {supplierName: "Supplier A"},
            pchmWay: "方式1",
            name: "Alice",
            province: "California",
            city: "Los Angeles",
            address: "123 Main St",
            zip: "90001",
          },
          {
            id: 2,
            date: "2022-01-02",
            supplier: {supplierName: "Supplier B"},
            pchmWay: "方式2",
            name: "Bob",
            province: "Ontario",
            city: "Toronto",
            address: "456 Queen St",
            zip: "M5H 2N2",
          },
          {
            id: 3,
            date: "2022-01-03",
            supplier: {supplierName: "Supplier C"},
            pchmWay: "方式3",
            name: "Charlie",
            province: "Texas",
            city: "Houston",
            address: "789 King St",
            zip: "77001",
          },
        ],
        tableColumns: [
          {label: "序号", type: "index", width: "50px"},
          {label: "日期", prop: "date", width: "50px"},
          {label: "供应商名称", prop: "supplier.supplierName", width: "50px"},
          {label: "采购方式", prop: "pchmWay", width: "80px"},
          {
            label: "配送信息",
            children: [
              {label: "姓名", prop: "name"},
              {
                label: "地址",
                children: [
                  {label: "省份", prop: "province"},
                  {label: "市区", prop: "city"},
                  {label: "地址", prop: "address"},
                  {label: "邮编", prop: "zip"},
                ],
              },
            ],
          },
        ],
      };
    },
  };
</script>
Expand Copy

# 水印用法

参考Q-Water


<QPrint :waterMarkProps="waterMarkConfig">
  <QTable
      :data="tableData"
      :columns="tableColumns"
      :paginate="false"
      :ellipsis="false"
  >
    <template v-slot:supplier.supplierName="{ row }">
      <span>{{ row.supplier.supplierName }}</span>
    </template>
  </QTable>
</QPrint>
<script>

  export default {
    data() {
      return {
        waterMarkConfig: {
          text: ['水印']
        },
        tableData: [
          {
            id: 1,
            date: "2022-01-01",
            supplier: {supplierName: "Supplier A"},
            pchmWay: "方式1",
            name: "Alice",
            province: "California",
            city: "Los Angeles",
            address: "123 Main St",
            zip: "90001",
          },
          {
            id: 2,
            date: "2022-01-02",
            supplier: {supplierName: "Supplier B"},
            pchmWay: "方式2",
            name: "Bob",
            province: "Ontario",
            city: "Toronto",
            address: "456 Queen St",
            zip: "M5H 2N2",
          },
          {
            id: 3,
            date: "2022-01-03",
            supplier: {supplierName: "Supplier C"},
            pchmWay: "方式3",
            name: "Charlie",
            province: "Texas",
            city: "Houston",
            address: "789 King St",
            zip: "77001",
          },
        ],
        tableColumns: [
          {label: "序号", type: "index", width: "50px"},
          {label: "日期", prop: "date", width: "50px"},
          {label: "供应商名称", prop: "supplier.supplierName", width: "50px"},
          {label: "采购方式", prop: "pchmWay", width: "80px"},
          {
            label: "配送信息",
            children: [
              {label: "姓名", prop: "name"},
              {
                label: "地址",
                children: [
                  {label: "省份", prop: "province"},
                  {label: "市区", prop: "city"},
                  {label: "地址", prop: "address", width: "180px"},
                  {label: "邮编", prop: "zip"},
                ],
              },
            ],
          },
        ],
      };
    },
  };
</script>
Expand Copy

# Attributes

# Q-Print

提示

打印按钮支持 v-bind="$attrs" 和 v-on="$listeners" 透传。

属性名 说明 类型 可选值 默认值
printProps 打印配置 Object printProps —
waterMarkProps 水印配置 Object waterMarkProps —
buttonProps 按钮配置 Object buttonProps —
showWater 显示水印 Boolean - true
showTips 显示提示 Boolean - false
showPrintButton 显示按钮 Boolean - true

# printProps

printProps具体属性讲解

属性名 说明 类型 可选值 默认值
id 打印ID String - 'printDiv'
popTitle 打印配置页上方标题 String process.env.VUE_APP_TITLE -

# waterMarkProps

waterMarkProps具体属性讲解，参考Q-Water #Attributes

属性名 说明 类型 可选值 默认值
text 水印文本 Array / String ['水印'] —
fontSize 文字大小 Number — 16
fontColor 文字颜色 String — 'rgba(0, 0, 0, 0.2)'
rotate 旋转角度 Number — -22
textSpacingX X相隔 Number — 200
textSpacingY Y相隔 Number — 150
zIndex 层级 Number — 9
image 图片 String — -
showTime 显示时间 Boolean — true
dynamicTime 动态时间 Boolean — false

# buttonProps

buttonProps具体属性讲解

属性名 说明 类型 可选值 默认值
text 按钮文字 String - '打印'
textStyle 文字样式 Object - {textAlign: 'left'}
buttonStyle 按钮样式 Object - {textAlign: 'right'}
divStyle 父盒子样式 Object - { display: 'flex',justifyContent: 'space-between',alignItems: 'center'}

# Slots

提示

header该属性无效

属性名 说明
text 标题文字
button 按钮
header 内容头部

# 依赖

提示

1.使用到的依赖

npm install vue-print-nb --save

2.在 main.js 全局注册

import Print from 'vue-print-nb'

Vue.use(Print)

← Q-Water 水印 →