vue-print-nb 解决 vue 打印问题，并且隐藏页眉页脚

1、通过 npm 安装 vue-print-nbnpm install vue-print-nb --save2、挂载到 Vue 上import Print from 'vue-print-nb'Vue.use(Print)3、配置打印对象<div id="main">这里是要打印的东西</div>

Insist_bin

15432人浏览 · 2020-07-20 23:43:31

Insist_bin · 2020-07-20 23:43:31 发布

1、通过 npm 安装 vue-print-nb

npm install vue-print-nb --save

2、挂载到 Vue 上

import Print from 'vue-print-nb'
Vue.use(Print)

3、配置打印对象

<div id="main">
这里是要打印的东西
</div>
<!-- 打印按钮，通过 v-print 调用打印事件 -->
<button v-print="printObj">打印</button>

export default {
    name: "XssqAddActivity",
    data() {
      return {
         printObj: {
          id: "main",    // 这里是要打印元素的ID
          popTitle: '',  // 打印的标题
          extraCss: '',  // 打印可引入外部的一个 css 文件
          extraHead: ''  // 打印头部文字
        },
      } 
    }
}

这是 vue-print-nb 的官网地址：

https://www.npmjs.com/package/vue-print-nb

4、打印时出现页面页脚的解决办法，添加一下 css样式

/*去除页眉页脚*/
  @page{
    size:  auto;   /* auto is the initial value */
    margin: 3mm;  /* this affects the margin in the printer settings */
  }

  html{
    background-color: #FFFFFF;
    margin: 0;  /* this affects the margin on the html before sending to printer */
  }

  body{
    border: solid 1px blue ;
    margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
  }
  /*去除页眉页脚*/

注意事项：

vue-print-nb 不能打印一些 css3 的样式，比如说一些 UI 组件库的 radio 等。如果需要打印请自己封装 radio，（试过通过 html2canvas + printJs 打印但是可控性太差，因为只能把页面可见内容转换成 canvas 打印，如果用户屏幕太小，进行转换图片会缺失）如果有更好的解决办法请在评论留言哟

觉得有用的小伙伴点个赞哟，博主会持续更新的！