打印功能

一、安装

npm install vue-print-nb --save-dev

二、注册

在 main.js 中引入并注册

import { createApp } from "vue";
import print from "vue3-print-nb";
import App from "./App.vue";
const app = createApp(App);
app.use(print).mount("#app");

三、组件中使用

定义一个 printObj 对象，注意局部打印必须在 printObj 对象上配置 id 属性，并将其绑定在需要打印的容器上。打印按钮通过 v-print=”printObj”实现打印效果

<template>
  <div id="myPrint">
    <!-- 流程信息详情 -->
    <el-table :data="wfData" style="margin-top: 70px">
      <el-table-column type="index" width="auto" />
      <el-table-column prop="node_name" label="环节名称" width="auto" />
      <el-table-column prop="proc_type" label="环节类型" width="auto" />
      <el-table-column prop="deal_state" label="环节状态" />
      <el-table-column prop="username" label="办理人" />
      <el-table-column prop="dept" label="办理人部门" />
      <el-table-column prop="action_value" label="办理意见" />
      <el-table-column prop="create_date" label="创建时间" />
      <el-table-column prop="complete_date" label="完成时间" />
      <el-table-column prop="deal_content" label="审批意见" />
    </el-table>
  </div>
  <el-row type="flex" justify="center" style="margin-top: 10px">
    <el-button v-print="printObj" type="primary">打印</el-button>
    <el-button @click="$router.back()">返回</el-button>
  </el-row>
</template>

<script>
import { ref, onMounted, defineComponent } from "vue";
import { useRoute } from "vue-router";

export default defineComponent({
  setup() {
    const route = useRoute();
    const wfData = ref(null);
    const printObj = ref({
      id: "myPrint",
    });
    onMounted(() => {
      wfData.value = JSON.parse(route.params.wfData);
    });
    return { detailPage, applyIdValue, rowData, printObj, wfData };
  },
});
</script>
<style scoped lang="less"></style>