效果图
1:npm install jsbarcode
npm install vue-print-nb
2:main.js 引入
import Print from 'vue-print-nb'
Vue.use(Print)
3:
<template>
<div>
<el-dialog
:visible.sync="visible"
width="640px"
title="打印"
@closed="closeIng"
>
<!-- 打印内容 -->
<div ref="printContent" id= "printContent" class="printContent">
<svg id="barcodeContainer1" ref="barcodeContainer1" style="display: block;"></svg>
<!-- <svg id="barcodeContainer2" ref="barcodeContainer2" style="display: block;"></svg>
<svg id="barcodeContainer3" ref="barcodeContainer3" style="display: block;"></svg>
<svg id="barcodeContainer4" ref="barcodeContainer4" style="display: block;"></svg>
<svg id="barcodeContainer5" ref="barcodeContainer5" style="display: block;"></svg>
<svg id="barcodeContainer6" ref="barcodeContainer6" style="display: block;"></svg>
<svg id="barcodeContainer7" ref="barcodeContainer7" style="display: block;"></svg>
<svg id="barcodeContainer8" ref="barcodeContainer8" style="display: block;"></svg>
<svg id="barcodeContainer9" ref="barcodeContainer9" style="display: block;"></svg> -->
<!-- <img ref="barcodeContainer1" id="barcodeContainer1" style="display: block;"/> -->
</div>
<div slot="footer" >
<el-button v-print="print" type="primary" size="small"
>打印</el-button
>
<el-button @click="visible = false" size="small">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import JsBarcode from "jsbarcode";
export default {
components: { },
data() {
return {
visible: false,
//有些不需要的可以去掉
print: {
id: "printContent",
popTitle: "", // 打印配置页上方标题
extraHead: "", //最上方的头部文字,附加在head标签上的额外标签,使用逗号分隔
preview: false, // 是否启动预览模式,默认是false(开启预览模式,可以先预览后打印)
previewTitle: "", // 打印预览的标题(开启预览模式后出现),
previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本,点击可进入打印(开启预览模式后出现)
zIndex: "", // 预览的窗口的z-index,默认是 20002(此值要高一些,这涉及到预览模式是否显示在最上面)
previewBeforeOpenCallback() {}, //预览窗口打开之前的callback(开启预览模式调用)
previewOpenCallback() {}, // 预览窗口打开之后的callback(开启预览模式调用)
beforeOpenCallback() {}, // 开启打印前的回调事件
openCallback() {
}, // 调用打印之后的回调事件
closeCallback() {}, //关闭打印的回调事件(无法确定点击的是确认还是取消)
url: "",
standard: "",
extraCss: "",
},
};
},
mounted(){
this.init();
},
methods: {
init() {
const paperWidth = 76.2; // 3 inches in mm
const paperHeight = 127; // 5 inches in mm
const barcodeOptions = {
format: 'CODE128',
width: 2, // 根据纸张宽度调整条形码宽度
height: 200, // 根据纸张高度调整条形码高度
displayValue: true,
};
const barcodeContainer = document.getElementById("barcodeContainer1");
barcodeContainer.style.width = `${paperWidth * 1.1}mm`; // 90% of paper width
barcodeContainer.style.height = `${paperHeight * 1}mm`; // 70% of paper height
JsBarcode("#barcodeContainer1", "121242457", barcodeOptions);
// JsBarcode("#barcodeContainer2", "121242456", barcodeOptions);
// JsBarcode("#barcodeContainer3", "121242455", barcodeOptions);
// JsBarcode("#barcodeContainer4", "121242454", barcodeOptions);
// JsBarcode("#barcodeContainer5", "121242453", barcodeOptions);
// JsBarcode("#barcodeContainer6", "121242452", barcodeOptions);
// JsBarcode("#barcodeContainer7", "121242451", barcodeOptions);
// JsBarcode("#barcodeContainer8", "121242450", barcodeOptions);
// JsBarcode("#barcodeContainer9", "121242458", barcodeOptions);
},
},
};
</script>
<style scoped>
@media print {
@page {
size: 3in 5in;
margin: 0;
}
#barcodeContainer1 {
display: block;
margin: auto;
max-width: 110%;
max-height: 100%;
}
.printContent{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0.25in;
box-sizing: border-box;
margin-top: 170px;
}
svg {
max-width: 110%;
max-height: 100%;
}
}
</style>
注意:主要是在这个margin-top的属性,不加的话打印出来就是空白的。
想要验证的话可以把注释的打开,多建立几个就知道当前打印的位置了,
.printContent{
margin-top: 170px;
}