一、安装
1
| npm install vue-print-nb --save-dev
|
二、注册
在 main.js 中引入并注册
1
2
3
4
5
| 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”实现打印效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <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>
|