vue3-print打印eletable某一行的数据

主页面的表格

1. <template>
2.     <el-table :data="list">
3.         <el-table-column label="操作" align="center">
4.            <template #default="scope">
5.              <el-button
6.                 link
7.                 type="primary"
8.                 @click="handleType(scope.row)"
9.                 :loading="qrCodeLoading">
10.                 打印
11.               </el-button>
12.             </template>
13.         </el-table-column>
14.     </el-table>
15.     // 打印子页面
16.     <type ref="qrRef" @success="loadData"/>
17. </template>
18. <script>
20. const qrRef = ref()
21. const qrCodeLoading = ref(false)
23. /** 打印 */
24. const multiple = ref([])
25. const handleType = async (row) => {
26.   try {
27.     multiple.value.push(row)
28.     console.log('ss', multiple)
29.     qrRef.value.open(multiple)
30.     // todo 接口
31.     multiple.value = []
32.   } catch {
33.   } finally {
34.     qrCodeLoading.value = false
35.   }
36. }
38. const loadData = async (arg) => {
39.   // todo 打印完毕
40. }
42. </script>

复制代码

 子页面---

1. <template>
2.   <Dialog
3.       v-model="dialogVisible"
4.       :title="dialogTitle"
5.       width="1000px"
6.       height="1200px"
7.       @close="handleCloseModal"
8.   >
9.     <e-row>
10.       <el-button type="success" plain v-print="printObj">
11.         <Icon icon="ep:download"/>
12.         打印
13.       </el-button>
14.     </e-row>
15.     <el-row class="row-con" id="printMe">
16.       <div
17.           v-for="item in tableData"
18.           :ref="setItemRef"
19.           :key="item.partCode"
20.           style="width: 100%"
21.        >
22.        <div style="border: 2px black; margin-top:105px;
23.                     margin-left: 54px; margin-right: 55px; margin-bottom: 8px;">
24.           <div style="width: 100%; display: flex; flex-direction: row">
25.                {{ 需要打印的内容+tableData }}
26.           </div>
27.        </div>
28.       </div>
29.     </el-row>
30.   </Dialog>
31. </template>
33. <script setup lang="ts">
34. import qrcode from 'qrcode'
36. const dialogVisible = ref(false)
37. const dialogTitle = ref('条码打印')
39. const handleCloseModal = () => {
40.   dialogVisible.value = false
41. }
42. const tableData = ref([])
44. onMounted(() => {
45.   // console.log(t.userInfo.account)
46. })
48. const itemRefs = ref([])
49. const setItemRef = (el) => {
50.   if (el) {
51.     itemRefs.value.push(el)
52.   }
53. }
54. const printObj = ref({
55.   id: 'printMe',
56.   popTitle: '',
57.   maxWidth: 302, // 最大宽度
58.   extraCss:
59.       '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',
60.   extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
61.   // extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>,<style> #printMe { height: 302px !important; } <style>',//  可以传进去  style tag 标签；注意要逗号分隔   解决特定区域不显示问题
62.   beforeOpenCallback(vue) {
63.     vue.printLoading = true
64.     console.log('打开之前')
65.   },
66.   openCallback(vue) {
67.     vue.printLoading = false
68.     console.log('执行了打印', vue)
69.   },
70.   closeCallback(vue) {
71.     console.log('关闭了打印工具', vue)
72.   }
74. })
75. const open = (data) => {
76.   dialogVisible.value = true
77.   console.log('data', data)
78.   tableData.value = data.value
79.   console.log('tableData', tableData.value)
80.   tableData.value.forEach((item) => {
81.     //var code = 'your-data' // 替换为你需要生成二维码的数据
82.     qrcode.toDataURL(item.partCode, (err, url) => {
83.       if (err) {
84.         console.error(err)
85.       } else {
86.         console.log('toDataURL', url)
87.       }
88.     })
89.   })
90. }
91. defineExpose({open}) // 提供 open 方法，用于打开弹窗
92. </script>
93. <style scoped lang="scss">
94. .row-con {
95.   display: flex;
96.   flex-flow: row wrap;
97. }
99. .printContainer {
100.   -webkit-print-color-adjust: exact;
101.   /* 打印时表格上边框会消失 貌似是因为 使用伪元素的缘故 */
102.   ::v-deep(.el-table__inner-wrapper::after) {
103.     height: 0px !important;
104.   }
106.   /* 使用自己的表格上边框 */
107.   ::v-deep(.el-table__inner-wrapper) {
108.     border-top: 1px solid #e5e7eb;
109.   }
111.   /* 打印时边框太小会被挤没，那让边框变大点就好了*/
112.   ::v-deep(.el-table__cell) {
113.     border-right: 2px solid #e5e7eb;
114.   }
115. }
117. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。