## Print 局部打印
局部打印插件 $cvuPrint,可以调取打印机,以高还原度对指定的元素块进行打印操作。
局部打印插件 $cvuPrint 是在 Vue.js 程序内使用的,它并非常规组件,而是方法的调用。任何地方,只需要一行代码,即可对指定的元素节点进行打印。
需使用ref获取dom节点,若直接通过id或class获取则webpack打包部署后打印内容为空。
![](https://img.kancloud.cn/64/22/6422e3b38ab6b3ac3305e9105286e272_1839x1213.png =400x)
### 代码示例
```javascript
<template>
<div class="page" ref="page">
<h3>基础用法</h3>
<cvu-button type="primary" icon="md-print" @click="print">打印</cvu-button>
<h3 class="no-print">设置不打印元素</h3>
<cvu-button type="primary" icon="md-print" class="no-print" @click="print('.no-print')">打印</cvu-button>
</div>
</template>
<script>
export default {
methods: {
print(noPrint) {
this.$cvuPrint(this.$refs.page, {'noPrint': noPrint})
}
}
}
</script>
```
### methods
| 方法名 | 说明 | 参数 |
| --- | --- | --- |
| $cvuPrint | 打印方法 | el: this.$refs.xxx \-打印区域元素;<br>options:{'noPrint': '.元素类名'} \-不打印区域元素名配置 |
- 介绍
- 安装
- 快速上手
- 组件
- 基础
- Button 按钮
- ButtonGroup 按钮组
- 布局
- Card 卡片
- Col 列
- Collapse 折叠面板
- Divider 分割线
- Empty 空数据
- Row 行
- 导航
- Paginator 分页
- PaginatorMini 分页
- Tab 标签页
- 表单
- Cascader 级联选择
- PasswordStrength 密码强度
- Print 局部打印
- Table 表格
- Upload 文件上传
- 视图
- Calendar 日历
- Drawer 抽屉
- Loading 加载
- Message 全局提示
- Modal 对话框
- Notification 通知菜单
- Poptip 气泡提示
- Preview 图片预览
- PreviewPdf pdf文件预览
- Tooltip 文字提示
- Tree 树形控件
- 方法
- Copy 复制到剪贴板
- DescNotice 桌面消息通知
- Html2Pdf 导出pdf
- Storage 定时存储
- 其他
- BackTop 返回顶部
- NumberScroll 数字动画
- NumberZero 数字前补零
- Spin 局部加载
- Tcplayer 播放器