vue打印、vue-print-nb插件的基本使用
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
今天做项目碰到一个打印的需求,只打印一个表格,去网上找了些方法总结一下
打印的方法最常见的就是window.print(),这是浏览器自带的打印方法,方便快捷无需安装插件,但相应的自定义化也差无法打印页面局部,去网上查找资料之后发现vue-print-nb这个插件使用频率是比较高的,也是功能相对比较完善的
使用:
npm install vue-print-nb --save
然后再mian.js引入并使用
import Print from 'vue-print-nb'
Vue.use(Print)
局部或单页面引入使用:(此处我使用单页面引入有问题,一进页面就自动执行打印了,所以我最后选择了全局引入)
// 单组件引用
import print from 'vue-print-nb'
// 注册指定因为页面需要使用自定义指令v-print
directives: {
print
}
然后给需要执行打印的按钮绑定自定义执行v-print
<Button type="primary" icon="md-print" v-print="printOption">打印</Button>
再给需要打印的容器加上一个id:
<Table border :data="dataList" :columns="columns" id="printContent"> </Table>
在data函数返回的对象里面加入打印的配置参数,因为v-print绑定的是一个配置对象,
更多参数配置可参考官方:https://www.npmjs.com/package/vue-print-nb
printOption:{
id:'printContent',//打印的容器id
popTitle: '打印',//打印页的标题
///...option
}
然后点击打印效果如下图:
然后看了下觉得按钮那一列不想要打印,于是给按钮包了一个div并加了一个class
<div class="hidden">
<Button
size="small"
type="primary"
icon="md-create"
@click="handleEdit(row)"
>编辑</Button
>
<Button
class="ml-5"
size="small"
type="error"
icon="md-trash"
@click="handleRemove(row.id)"
>删除</Button
>
</div>
并给这个div以下样式:
@media print {
.hidden{
display: none;
}
}
最终打印效果如下:
页面:
打印界面:
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献6条内容
所有评论(0)