今天做项目碰到一个打印的需求,只打印一个表格,去网上找了些方法总结一下

打印的方法最常见的就是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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐