vue循环打印表格和二维码

准备工作

npm install qrcodejs2 --save

使用页面引入 import QRCode from "qrcodejs2";

html代码

            <div>                
                <div v-for="(v, index) in  printList " :id="'printDiv' + index" :key="v.yId"
                    style="page-break-after:always">
                    <table border="1" style=" border-collapse: collapse;">
                        <tr>
                            <td colspan="4">abc:{{ v.xxx }}</td>
                        </tr>
                        <tr>
                            <td>abc</td>
                            <td>{{ v.xxx }}</td>
                            <td>abc</td>
                            <td>{{ v.xxx }}</td>
                        </tr>
                        <tr>
                            <td>abc</td>
                            <td>{{ v.xxx }}</td>
                            <td>abc</td>
                            <td>{{ v.xxx }}</td>
                        </tr>
                        <tr>
                            <td rowspan="4" colspan="3">abc:{{ v.yRemark }}</td>
                            <td rowspan="4" colspan="1">
                                //二维码组件
                                <QRCode :index="index" :text="QRCodeData(v)" />
                            </td>
                        </tr>
                        <tr></tr>
                        <tr></tr>
                        <tr></tr>
                    </table>
                </div>
            </div>

 js代码

        // 打印
        handlePrint() {
            if (this.printList.length > 0) {
                var newWin = window.open(""); //新打开一个空窗口
                for (var i = 0; i < this.printList.length; i++) {
                    var imageToPrint = document.getElementById("printDiv" + i); //获取需要打印的内容
                    newWin.document.write(imageToPrint.outerHTML); //将需要打印的内容添加进新的窗口
                }
                this.printList = []
               // 打印样式的css代码要写在这里要不然打印不生效
                const styleSheet = `<style>tr {border: 1px solid black; padding: 5px; font-weight: bold; height: 2vh}td {border: 1px solid black;padding: 5px;font-weight: bold;width: 14vw;}</style>`;
                newWin.document.head.innerHTML = styleSheet; //给打印的内容加上样式
                newWin.document.close(); //在IE浏览器中使用必须添加这一句
                newWin.focus(); //在IE浏览器中使用必须添加这一句
                setTimeout(function () {
                    newWin.print(); //打印
                    newWin.close(); //关闭窗口
                }, 100);
            } else {
                this.$Message.info("您选择的数据暂无可打印的值");
            }
        },

二维码组件

<template>
    <div>
    //id和ref的值一定要一致
        <div style="display: flex;justify-content: space-between;">
            <div> </div>
            <div :id="`qrcode${this.index}`" :ref="`qrcode${this.index}`"></div>
            <div> </div>
        </div>
    </div>
</template>

<script>

import QRCode from "qrcodejs2";
export default {
    name: 'WebQRCode',
    props: ['index', 'text'],
    data() {
        return {

        };
    },

    mounted() {

        new QRCode(`qrcode${this.index}`, {
            width: 60, //宽度
            height: 60,            // 高度
            text: this.text,      // 二维码内容
            render: "table",        // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        });
    },

    methods: {

    },
};
</script>