主页面的表格
javascript"><template><el-table :data="list"><el-table-column label="操作" align="center"><template #default="scope"><el-buttonlinktype="primary"@click="handleType(scope.row)":loading="qrCodeLoading">打印</el-button></template></el-table-column></el-table>// 打印子页面<type ref="qrRef" @success="loadData"/>
</template>
<script>const qrRef = ref()
const qrCodeLoading = ref(false)/** 打印 */
const multiple = ref([])
const handleType = async (row) => {try {multiple.value.push(row)console.log('ss', multiple)qrRef.value.open(multiple)// todo 接口multiple.value = []} catch {} finally {qrCodeLoading.value = false}
}const loadData = async (arg) => {// todo 打印完毕
}</script>
子页面---
javascript"><template><Dialogv-model="dialogVisible":title="dialogTitle"width="1000px"height="1200px"@close="handleCloseModal"><e-row><el-button type="success" plain v-print="printObj"><Icon icon="ep:download"/>打印</el-button></e-row><el-row class="row-con" id="printMe"><divv-for="item in tableData":ref="setItemRef":key="item.partCode"style="width: 100%"><div style="border: 2px black; margin-top:105px; margin-left: 54px; margin-right: 55px; margin-bottom: 8px;"><div style="width: 100%; display: flex; flex-direction: row">{{ 需要打印的内容+tableData }}</div></div></div></el-row></Dialog>
</template><script setup lang="ts">
import qrcode from 'qrcode'const dialogVisible = ref(false)
const dialogTitle = ref('条码打印')const handleCloseModal = () => {dialogVisible.value = false
}
const tableData = ref([])onMounted(() => {// console.log(t.userInfo.account)
})const itemRefs = ref([])
const setItemRef = (el) => {if (el) {itemRefs.value.push(el)}
}
const printObj = ref({id: 'printMe',popTitle: '',maxWidth: 302, // 最大宽度extraCss:'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css',extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',// extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>,<style> #printMe { height: 302px !important; } <style>',// 可以传进去 style tag 标签；注意要逗号分隔 解决特定区域不显示问题beforeOpenCallback(vue) {vue.printLoading = trueconsole.log('打开之前')},openCallback(vue) {vue.printLoading = falseconsole.log('执行了打印', vue)},closeCallback(vue) {console.log('关闭了打印工具', vue)}})
const open = (data) => {dialogVisible.value = trueconsole.log('data', data)tableData.value = data.valueconsole.log('tableData', tableData.value)tableData.value.forEach((item) => {//var code = 'your-data' // 替换为你需要生成二维码的数据qrcode.toDataURL(item.partCode, (err, url) => {if (err) {console.error(err)} else {console.log('toDataURL', url)}})})
}
defineExpose({open}) // 提供 open 方法，用于打开弹窗
</script>
<style scoped lang="scss">
.row-con {display: flex;flex-flow: row wrap;
}.printContainer {-webkit-print-color-adjust: exact;/* 打印时表格上边框会消失 貌似是因为 使用伪元素的缘故 */::v-deep(.el-table__inner-wrapper::after) {height: 0px !important;}/* 使用自己的表格上边框 */::v-deep(.el-table__inner-wrapper) {border-top: 1px solid #e5e7eb;}/* 打印时边框太小会被挤没，那让边框变大点就好了*/::v-deep(.el-table__cell) {border-right: 2px solid #e5e7eb;}
}</style>
