前端网页打印

1.安装依赖

npm install print-js --save

2.在需要的vue页面引入

import print from 'print-js'

3.在vue页面使用

<template>
  <div class="content">
    <div class="footer">
      <!-- on-print  将不会被打印 -->
      <el-button class="no-print" id="h" type="primary" @click="addLog"
        >打印</el-button
      >
      <el-button class="no-print" id="h" type="primary" @click="cancel"
        >取消</el-button
      >
    </div>
    <vue-scroll :ops="ops" ref="print" style="width: 100%; height: 100%">
      <div class="content_c" id="print">
        <div class="box_item" v-for="item in list" :key="item.rackCode">
          <img :src="item.qrcode" alt="" />
          <div class="text">
            <span>{{ item.rackCode }} <br /> </span>
          </div>
        </div>
      </div>
    </vue-scroll>
  </div>
</template>

<script>
import print from "print-js";
import { getQcode } from "@/api/cabinetManage/index.js";
export default {
  components: {},
  data() {
    return {
      //轮动条的设置 安装vue-srcoll 在main.js页面引入
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          keepShow: true,
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#17c1ea", //滚动条颜色
          opacity: 1, //滚动条透明度
          "overflow-x": "hidden",
        },
      },
      list: [],
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getQrCodeList();
  },
  methods: {
    cancel() {
      this.$parent.isQrcodeShow = false;
    },
    addLog() {
      //打印内的样式
      const style =
        "@page { margin-bottom:20px ;margin-left:45px;} " +
        "@media print {.content_c{ display: flex;flex-wrap: wrap;align-items: center;}.box_item{width:120px;height:160px;margin-top:15px;margin-left:15px;display: flex;align-items: center;flex-direction: column;justify-content: center;border: 0.5px solid #e8e8e8;} img {width: 100px;height: 100px;}}" +
        "body {margin:0}";
      printJS({
        printable: "print",
        type: "html",
        targetStyles: ["*"], //这样设置继承了页面要打印元素原有的css属性。
        scanStyles: false, //设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用。
        style: style,
      });
    },
    getQrCodeList() {
      getQcode().then((res) => {
        if (res.code == 200) {
          this.list = res.data;
        }
      });
    },
  },
};
</script>