vue3-print打印eletable某一行的数据 - IT评测·应用市场-qidao123.com

<template>
<el-table :data="list">
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="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>

复制代码

<template>
<Dialog
v-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">
<div
v-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 = true
console.log('打开之前')
},
openCallback(vue) {
vue.printLoading = false
console.log('执行了打印', vue)
},
closeCallback(vue) {
console.log('关闭了打印工具', vue)
}
})
const open = (data) => {
dialogVisible.value = true
console.log('data', data)
tableData.value = data.value
console.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>

复制代码