# BatchCode

**Repository Path**: guobaocui/batch-code

## Basic Information

- **Project Name**: BatchCode
- **Description**: 批量生成二维码支持打印
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-04-10
- **Last Updated**: 2023-04-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-qrcodejs2 批量打印（PC 端）

---

![1681117662244](image/README/1681117662244.png)
![1681117679374](image/README/1681117679374.png)

#### 技术栈

vue2 + webpack + ES6/7 +qrcodejs2+print.js

#### 使用插件

下载
npm install print-js --save
yarn add print-js
导入
import print from 'print-js'
import 'print-js/dist/print.css';
Vue.prototype.$print = printjs;

<!-- 下面一样使用npm 或者 yarn  -->

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

import pluginsPrint from './plugins/print';
Vue.use(pluginsPrint); // 注册

#### 参考链接

https://github.com/xyl66/vuePlugs_printjs
https://juejin.cn/post/6888519415717953549

####

```bash
 // 设置打印内容不可见  将打印的内容转化成图片形式  printStyle  推荐使用这个 只需要设置display：none 就可以看不到二维码
                        printJS({
                            printable: 'printStyle',
                            type: 'html',
                            targetStyles: ['*'],
                            style: '@page {margin:0 10mm};',
                        });
打印内容可见
		 setTimeout(() => {
               this.$print(this.$refs.print);
                }, 200);
```

```bash
vue 打印插件 使用方法

import Print from '@/plugs/print'
Vue.use(Print) // 注册
<template>

<section ref="print">
	打印内容
	<div class="no-print">不要打印我</div>
</section>
</template>
this.$print(this.$refs.print) // 使用
注意事项 需使用ref获取dom节点，若直接通过id或class获取则webpack打包部署后打印内容为空 指定不打印区域 方法一. 添加no-print样式类

<div class="no-print">不要打印我</div>
方法二. 自定义类名
<div class="do-not-print-me-xxx">不要打印我</div>
this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用
```

## 使用

```bash
 <HelloWorld v-show="false" ref="printref" />
	<button @click="handlePrintCode">批量打印</button>
	 handlePrintCode() {
            // console.log(this.$refs.printref);
            this.$refs.printref.handleBatchPrintCode();
        },

```

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

### Lints and fixes files

```
npm run lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).