vue 打印功能 调用原生print，带（去掉页眉页脚）分页打印_vue printjs去掉页头页脚

安装 vue-print-nb插件

npm install vue-print-nb --save

安装完成后

在页面引入 import Print from 'vue-print-nb'

	</section>
</template>
<script>
  import Vue from 'vue';
  import Print from 'vue-print-nb'
  Vue.use(Print);
 
import util from "../../common/js/util";
import {
 
} from "../../api/api";
export default {
  data() {
    return {
        ...

然后在需要打印的位置，添加 id="printContent"

例如我是打印整个弹出框的信息，所以在最外层加了个div

<el-dialog title="打印" :visible.sync="printVisible" :close-on-click-modal="false" width="200mm">
          <div id="printContent">
          <template>
            <section class="title">
              *******
            </section>
          </template>
          <template>
            <section class="tableTitle">
              企业名称（章）：{{checkTableInfo.owner}}
            </section>
          </template>
          <template>
            <section style="margin-top: 2mm;">
              <table  class="table2">
                <tr>
                  <td>号牌号码</td>
....

然后打印按钮

<el-button style="margin-left:5px;" type="primary" v-print="'#printContent'">打印</el-button>

这时打印出来的页面会出现顶部的 一个网址 ，底部会出现页码和 时间，

去掉页眉页脚

如果想要去掉这些信息

可以添加这么一个设置

margin 具体你想设置 多是就多少，是距离边距的距离，根据你的需求定吧

<style media="printContent">
    @page {
      margin: 15mm; /* this affects the margin in the printer settings */
    }
</style>

现在打印出来的就可以了

分页打印

我的需求是一次性打印出来多个二维码，但是不放在一个页面里面

然后点击一个打印。噼里啪啦就都出来了。

<el-table-column label="二维码" width="250" align="center">
          <template slot-scope="scope">
            <el-card
              style="width: 200px; page-break-after: always"
              :id="'print' + scope.row.id"
            >
              <div :id="'qrcode' + scope.row.id"></div>
              <div style="text-align: center">{{ scope.row.id }}</div>
            </el-card>
          </template>
        </el-table-column>

printForm() {
      var newWin = window.open(""); //新打开一个空窗口
      this.assetsInfoPrintList.forEach((ele) => {
        var imageToPrint = document.getElementById("print" + ele.id); //获取需要打印的内容
        newWin.document.write(imageToPrint.outerHTML); //将需要打印的内容添加进新的窗口
      });
      // for (var i = 0; i < this.assetsInfoPrintList.length; i++) {}
      const styleSheet = `<style>li{list-style:none}</style>`;
      newWin.document.head.innerHTML = styleSheet; //给打印的内容加上样式
      newWin.document.close(); //在IE浏览器中使用必须添加这一句
      newWin.focus(); //在IE浏览器中使用必须添加这一句
      setTimeout(function () {
        newWin.print(); //打印
        newWin.close(); //关闭窗口
      }, 100);
    },

效果