vue项目经验：打印功能详解

vue打印功能详解

安装Print包

npm install vue-print-nb --save

main.js全局注册

import Print from 'vue-print-nb'
Vue.use(Print);

使用

用v-print指定需要打印的div容器，本次叫printTest。
最好使用行内样式，使用组件库部分样式可能不能生成。

       <div id="printTest" >
           <p>锄禾日当午</p>
　　　　　　<p>汗滴禾下土 </p>
　　　　　　<p>谁知盘中餐</p>
　　　　　　<p>粒粒皆辛苦</p>
　　　　</div>
　　　　<button v-print="'#printTest'">打印</button>

我的项目代码（ant design of vue组件）

<a-modal :title="`巡检单打印预览：${pollingListNO}`"
           v-model="show"
           :maskClosable="false"
           width="80%"
           :bodyStyle="bodyStyle"
           @cancel="handleCancel">
    <!-- <a-button key="back"
              @click="handleCancel">取消</a-button>
    <a-button key="submit"
              type="primary"
              style="margin-left: 16px"
              :loading="submitLoading"
              @click="handleConfirm">打印</a-button>
    <a-divider /> -->
    <template v-if="!loading">
      <div id="printWrap"
           title="测试">
        <h6 style="font-size:24px;text-align: center;line-height:40px;">设备巡检单</h6>
        <div style="height:80px;">
          <div style="float:left;width:50%;"><span style="display:inline-block;width:100px">巡检单号：</span><span>{{ myInfo.pollingListNo||"无" }}</span></div>
          <div style="float:left;width:50%;"><span style="display:inline-block;width:100px">派发时间：</span><span>{{ myInfo.distributionTime||"无" }}</span></div>
          <div style="float:left;width:50%;"><span style="display:inline-block;width:100px">派发人：</span><span>{{ myInfo.distributionUserName||"无" }}</span></div>
          <div style="float:left;width:50%;"><span style="display:inline-block;width:100px">完成期限：</span><span>{{ myInfo.pollingDeadline||"无" }}</span></div>
          <div style="float:left;width:50%;"><span style="display:inline-block;width:100px">巡检人：</span><span>{{ myInfo.pollingUserName||"无" }}</span></div>
          <div style="float:left;width:50%;"><span style="display:inline-block;width:100px">打印时间：</span><span>{{ printTime }}</span></div>
        </div>
        <!-- <a-table rowKey="id"
                size="middle"
                :bordered="true"
                :columns="TableColumns"
                :dataSource="myInfo.myCheckEquip"
                :pagination="false"
                :loading="loading">
          <template slot="deailResponse"
                    slot-scope="deailResponse, record">
            <span>{{ deailResponse.map((item,index)=>{return index+1+"："+item.pollingItemName}).join("；") }}</span>
          </template>
          <template slot="deailResponse"
                    slot-scope="deailResponse, record">
            <span>{{ deailResponse.map((item,index)=>{return index+1+"："+item.pollingItemFunction}).join("；") }}</span>
          </template>
        </a-table> -->
        <table style="width:100%;">
          <thead>
            <tr>
              <th style="text-align:left;border:1px solid black;width:2%;">序号</th>
              <th style="text-align:left;border:1px solid black;width:8%;">存放地点</th>
              <th style="text-align:left;border:1px solid black;width:10%;">设备名称</th>
              <th style="text-align:left;border:1px solid black;width:10%;">设备资产编号</th>
              <th style="text-align:left;border:1px solid black;width:25%;">项目</th>
              <th style="text-align:left;border:1px solid black;width:25%;">方法</th>
              <th style="text-align:left;border:1px solid black;width:10%;">结果</th>
              <th style="text-align:left;border:1px solid black;width:10%;">备注</th>
            </tr>
          </thead>
          <tbody>
            <template v-if="myInfo.myCheckEquip&&myInfo.myCheckEquip.length">
              <tr v-for="(item,index) in myInfo.myCheckEquip"
                  :key="index">
                <td style="text-align:left;border:1px solid black;width:4%;">{{ index+1 }}</td>
                <td style="text-align:left;border:1px solid black;width:6%;">{{ item.location }}</td>
                <td style="text-align:left;border:1px solid black;width:10%;">{{ item.equipmentName }}</td>
                <td style="text-align:left;border:1px solid black;width:10%;">{{ item.equipmentAssetsNo }}</td>
                <!-- <td style="text-align:left;border:1px solid black;width:25%;">{{ item.deailResponse&&item.deailResponse.length?item.deailResponse.map((deail,j)=>{return j+1+"："+deail.pollingItemName}).join("；"):"无" }}</td> -->
                <td style="text-align:left;border:1px solid black;width:25%;">
                  <template v-if="item.deailResponse&&item.deailResponse.length">
                    <span style="display: block;"
                          v-for="(detail,j) in item.deailResponse">{{ j+1+"、"+detail.pollingItemName+"；" }}</span>
                  </template>
                  <template v-else>无</template>
                </td>
                <!-- <td style="text-align:left;border:1px solid black;width:25%;">{{ item.deailResponse&&item.deailResponse.length?item.deailResponse.map((deail,j)=>{return j+1+"："+deail.pollingItemFunction}).join("；"):"无" }}</td> -->
                <td style="text-align:left;border:1px solid black;width:25%;">
                  <template v-if="item.deailResponse&&item.deailResponse.length">
                    <span style="display: block;"
                          v-for="(detail,j) in item.deailResponse">{{ j+1+"、"+detail.pollingItemFunction+"；" }}</span>
                  </template>
                  <template v-else>无</template>
                </td>
                <td style="text-align:left;border:1px solid black;width:10%;"></td>
                <td style="text-align:left;border:1px solid black;width:10%;"></td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    </template>
    <template v-else>
      <div class="spin-wrap">
        <a-spin size="large" />
      </div>
    </template>
    <template slot="footer">
      <a-button key="back"
                @click="handleCancel">取消</a-button>
      <a-button key="submit"
                type="primary"
                v-print="'#printWrap'">打印</a-button>
    </template>
  </a-modal>
</template>

<script>
import moment from 'moment'
import { TableColumns } from './index'
import { printInfo } from '@/api/equipment/polling/myNowTask'
import { Empty } from 'ant-design-vue'
export default {
  props: ['visible', 'pollingListSn', 'pollingListNO', 'userSn'],
  data () {
    return {
      bodyStyle: {
        'max-height': '600px',
        'overflow': 'auto'
      },
      printTime: null,
      loading: false,
      TableColumns,
      myInfo: {
        myCheckEquip: []
      }
    }
  },
  computed: {
    show: {
      get: function () {
        return this.visible
      },
      set: function () { }
    }
  },
  watch: {
    visible (newVal, oldVal) {
      if (newVal) {
        if (this.pollingListSn) {
          this.getInfo()
          this.printTime = moment().format('YYYY-MM-DD HH:mm:ss')
        }
      }
    }
  },
  beforeCreate () {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
  },
  methods: {
    getInfo () {
      this.loading = true
      const { pollingListSn, userSn } = this
      printInfo({ pollingListSn, userSn }).then(res => {
        console.log('printInfo', res)
        this.myInfo = res
      }).finally(() => {
        this.loading = false
      })
    },
    handleCancel () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="less" scoped>
.spin-wrap {
  text-align: center;
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
}
</style>

参考

vue中打印表格功能（重点是表格制作）