🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 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': '.元素类名'} \-不打印区域元素名配置 |