vue使用vue-print-nb打印图片

引入依赖

npm install vue-print-nb --save

全局注册 main.js

//打印功能

import Print from "vue-print-nb";

Vue.use(Print);

页面使用，data中定义属性

         showPrint: false,
            printImg: [
                "http://localhost:8080/ewm/21122319731103381X.png",
                "http://localhost:8080/ewm/21122319731103381X.png",
                "http://localhost:8080/ewm/21122319731103381X.png",
            ],
            printObj: {
                id: "posterbox",
                popTitle: "",
                extraHead: "",
                preview: false,
                previewBeforeOpenCallback(vue) {
                    console.log("正在加载预览窗口");
                    console.log(vue);
                    vue.showPrint = true; // 打开条码显示弹框
                },
                previewOpenCallback(vue) {
                    console.log("已经加载完预览窗口");
                },
                clickMounted: (vue) => {
                    console.log("触发点击打印回调");
                },
                beforeOpenCallback(vue) {
                    console.log(vue);
                },
                openCallback(vue) {
                    vue.showPrint = false; // 关闭条码显示弹框
                },
            },

html

<el-dialog :visible.sync="showPrint">
            <div id="posterbox">
                <div v-for="(item, index) in printImg" :key="index">
                    <div
                        v-show="showPrint"
                        style="
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            word-wrap: break-word;
                            page-break-after: always;
                            margin-right: 10px;
                        "
                    >
                        <el-image
                            style="width: 180px; height: 180px"
                            :src="item"
                        ></el-image>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button
                    class="print"
                    size="medium"
                    type="primary"
                    v-print="printObj"
                    >二维码打印</el-button
                >
            </span>
        </el-dialog>

其实就是你的按钮要加一个属性

v-print="printObj" 

这个printObj就是打印的配置，然后会调出打印框

设置分页样式，这个一定要加，不然你打印出来的图片不会分页，而且会莫名的进行缩放

<style lang="less" scoped>
@page {
    size: auto;
    margin: 0mm;
}
</style>

就像下面这样

然后设置纸张尺寸，需要再电脑的系统里面找到打印机，这个一定要做，不然打印的就不对

最后打印的效果