vue2使用print实现打印溯源码功能

自用笔记文章

一、安装插件

1.vue-print-nb - npm (npmjs.com)插件网址

2.全局引入使用在min.js中引入挂载

二、页面使用

            <div class="contentcss">
                <!-- 表格部分 -->
                <el-table :data="tableData" border style="width: 100%"
                    :default-sort="{prop:'crtTime',order:'descending'}" @select="selectclick" @select-all="selectall">
                    <el-table-column type="selection" width="44">
                    </el-table-column>
                    <el-table-column label="溯源码" prop="codeContent" width="180" height="94">
                        <template slot-scope="scope">
                            <div>
                                <el-popover placement="top-start" title="" trigger="hover">
                                    <QRCode alt="" :content="scope.row.codeContent" id="printTest" :width="'200'"
                                        :height="'200'"></QRCode>

                                    <QRCode slot="reference" :content="scope.row.codeContent" :width="'50'"
                                        :height="'50'" ref="refserence">
                                    </QRCode>
                                </el-popover>
                            </div>
                            <!-- 二维码打印 -->
                            <div class="qrCode-container" style="margin-left: 5px;">
                                <div id="printArea" style="margin-left: 15px;">
                                    <div style="font-size: 12px;margin-left: 10px;">质量安全，扫码可见</div>
                                    <!-- <div style="font-size: 12px;margin-left: 10px;">质量安全，扫码可见</div> -->
                                    <!-- <div v-for="(item,index) in selectionarr" ::key="index" class="qrCode-content"> -->
                                    <!-- <vue-qr ref="qrCode" :text="item.url" :logoSrc="showLogo ? item.logo : ''" size="400"></vue-qr> -->
                                    <div class="qrCode-content">
                                        <!-- <div style="font-size: 12px;margin-left: 10px;">质量安全，扫码可见</div> -->

                                        <div>
                                            <QRCode alt="" ref="qrCode" :content="scope.row.codeContent" id="printTest"
                                                :width="'100'" :height="'100'" style="width: 100px;height: 100px;">
                                            </QRCode>
                                        </div>
                                        <div class="contentextcss">
                                            <!-- <h1>商品名称{{item.goodsName}}</h1> -->
                                            <div style="font-size: 12px;margin-top: 10px;">
                                                商品名称：{{scope.row.goodsName}}</div>
                                            <div style="margin-top: 10px;font-size: 12px;">
                                                采收时间：{{scope.row.harvestingTime}}
                                            </div>
                                        </div>
                                    </div>
                                    <!-- </div> -->
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="templateName" label="使用模板" width="182">
                    </el-table-column>
                    <el-table-column prop="goodsName" label="商品名称" min-width="261">
                    </el-table-column>
                    <el-table-column prop="harvestingTime" label="采购时间" min-width="216">
                    </el-table-column>
                    <el-table-column prop="goodsWeight" label="商品重量" min-width="152">
                    </el-table-column>
                    <el-table-column prop="crtTime" label="创建时间" min-width="334">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" min-width="232">
                        <template slot-scope="scope" class="buttontemplatecss">
                            <el-button size="mini" style="width: 72px;padding: 7px 0px;" @click="clickprint(scope.row)"
                                v-print="print">下载打印</el-button>

                            <!-- <button v-print="'#printTest'">打印</button> -->
                            <el-button size="mini" @click="yieldediting(scope.row)"
                                style="margin-right: 10px;width: 48px;padding: 7px 0px;">编辑</el-button>
                            <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info"
                                icon-color="red" title="确定删除本条数据吗?" @confirm="clickConfirm(scope.row)">
                                <el-button slot="reference" type="danger" size="mini" plain
                                    style="width: 48px;padding: 7px 0px;">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

三、打印模板

     <!-- 二维码打印 -->
        <div class="qrCode-container" style="margin-left: 5px;">
            <div id="printQrCode" style="margin-left: 15px;">
                <div style="font-size: 12px;margin-left: 15px;">质量安全，扫码可见</div>
                <!-- <div style="font-size: 12px;margin-left: 10px;">质量安全，扫码可见</div> -->
                <div v-for="(item,index) in selectionarr" :key="index" class="qrCode-content" style="margin-left: 5px;">
                    <!-- <vue-qr ref="qrCode" :text="item.url" :logoSrc="showLogo ? item.logo : ''" size="400"></vue-qr> -->

                    <div>
                        <QRCode alt="" ref="qrCode" :content="item.codeContent" id="printTest" :width="'100'"
                            :height="'100'" style="width: 100px;height: 100px;"></QRCode>
                    </div>
                    <div class="contentextcss">
                        <!-- <h1>商品名称{{item.goodsName}}</h1> -->
                        <div style="font-size: 12px;margin-top: 10px;">商品名称：{{item.goodsName}}</div>
                        <div style="margin-top: 10px;font-size: 12px;">采收时间：{{item.harvestingTime}}</div>

                    </div>
                </div>
            </div>
        </div>

四、data设置项

                 msg: 'Welcome to Your Vue.js App',

print: {
                    id: 'printQrCode',
                    // popTitle: '配置页眉标题', // 打印配置页上方的标题
                    // extraHead: '打印', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
                    preview: false, // 是否启动预览模式，默认是false
                    previewTitle: '预览的标题', // 打印预览的标题
                    previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
                    zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
                    previewBeforeOpenCallback() { console.log('正在加载预览窗口！'); console.log(that.msg, this) }, // 预览窗口打开之前的callback
                    previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
                    beforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callback
                    // openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
                    openCallback: () => {
                        // 打印对话框打开后的回调函数
                        console.log('打印对话框已打开！');
                        // 调用其他回调函数
                        this.Printfunction()
                    },
                    closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
                    clickMounted() { console.log('点击v-print绑定的按钮了！') },
                    // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
                    // asyncUrl (reslove) {
                    //   setTimeout(() => {
                    //     reslove('http://localhost:8080/')
                    //   }, 2000)
                    // },
                    standard: '',
                    extarCss: '',
                },
                selectionarr: [],//左侧选择事件

五、打印事件

 // 点击打印
            clickprint(row) {
                this.selectionarr = []
                this.selectionarr.push(row)

                this.selectionar = row.codeContent

                console.log('点击打印', row, this.selectionar);
            },

六、效果图