[JavaScript知识库]vue打印问题（分页打印、批量打印条形码）

前言

项目需求打印功能所遇到的问题。在此记录，望能帮到你
一下问题：

• 当内容超过一页时不会自动分页？
• 当使用vue3-barcode 打印条形码时，不能批量打印？

基础打印

• 安装
  官网地址：https://github.com/Power-kxLee/vue3-print-nb

npm install vue3-print-nb --save

• 引用

// Global instruction 
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

//or

// Local instruction
import print from 'vue3-print-nb'

directives: {
    print   
}

• 页面使用

 <div id="printMe" style="background:red;">
     <p>葫芦娃，葫芦娃</p>
      <p>一根藤上七朵花 </p>
      <p>小小树藤是我家 啦啦啦啦 </p>
      <p>叮当当咚咚当当　浇不大</p>
      <p> 叮当当咚咚当当 是我家</p>
      <p> 啦啦啦啦</p>
      <p>...</p>
  </div>

  <button v-print="'#printMe'">Print local range</button>

分页打印， 当内容超过一页时不会自动分页？

不分页的原因： 就是你的代码里可能为body，html设置了高度为100%，打印时需要设置body、html的高度为auto；
打印时将body、html的高度设置为auto时，当打印的区域高度大于一页的高度时就会自动分页了；
方法一：
当你在搜索这个问题的时候，你可能会见过这种方法：
将插件下载到本地然后修改源码
插件地址：https://github.com/xyl66/vuePlugs_printjs

• 使用

import Print from '@/plugs/print'
Vue.use(Print) // 注册
<template>
<section ref="print">
	打印内容
	<div class="no-print">不要打印我</div>
</section>
</template>
this.$print(this.$refs.print) // 使用

在源码里找到getStyle方法

  getStyle: function () {
    var str = "",
      styles = document.querySelectorAll('style,link');
    for (var i = 0; i < styles.length; i++) {
      str += styles[i].outerHTML;
    }
    str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";

    // 添加此行可以多页自动分页
    str += "<style>html,body,div{height: auto!important;font-size:14px}</style>";

    return str;
  }

方法二：
使用打印媒体查询，在打印时重新设置body、html的高度

  @media print {
    @page {
      size:  auto;
    }
    body, html {
      height: auto !important;
    }
  }

使用这种简单方便

如果特殊需求，一页内容不满也要进行分页的话 可以在当前元素上加：

<div style="page-break-after:always">这是一整页</div>

当使用vue3-barcode 打印条形码时，不能批量打印？

原因：vue3-barcode源码里 他使用的是固定的class类， 使用document.querySelector选择的单个元素

// 源码
JsBarcode(
  document.querySelector('.vue3-barcode-element'),
    String(props.value),
    settings
  )

解决方法：
自己使用jsbarcode封装一个组件

地址：https://github.com/lindell/JsBarcode/wiki/Options

• 组件

<template>
   <!-- 条形码容器，可选svg、canvas，或img标签 -->
   <svg v-if="tagCode === 'svg'" :id="idName"></svg>
   <canvas v-if="tagCode === 'canvas'" :id="idName"></canvas>
   <img v-if="tagCode === 'img'" :id="idName"/>
</template>

<script>
import { onMounted, nextTick } from 'vue'
import { v4 as uuidv4 } from 'uuid'
// https://github.com/lindell/JsBarcode/wiki/Options
import jsbarcode from 'jsbarcode'

export default {
  name: 'jsBarcode',
  props: {
    tagCode: {
      type: String,
      default: 'svg'
    },
    value: [String, Number]
  },
  setup (props, ctx) {
    const idName = `jsBarcode${uuidv4()}`
    onMounted(() => {
      // 生成条形码
      nextTick(() => {
        jsbarcode(`#${idName}`, props.value, {
          height: 35,
          fontSize: 18,
          textAlign: "left", // Set the horizontal alignment of the text. Can be left / center / right
          displayValue: true //是否显示文字信息
        })
      })
    })
    return {
      idName
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

• 使用

<js-barcode value="1111111111111111"></js-barcode>
import JsBarcode from '@/components/JsBarcode'
 components: {
    JsBarcode
  }