网站开发 后端返回前端一个地址 有什么用,设计类专业介绍,有百度推广的网站,华为荣耀官网手机商城说下总体思路#xff0c;创建一个组件#xff0c;里面放多个span字段#xff0c;然后根据父组件传入的参数#xff0c;生成子组件#xff0c;最好我们打印子组件的信息即可。通过我多次ai#xff0c;探索最后成功了。
子组件代码
media print 这个我要讲一下#xff…说下总体思路创建一个组件里面放多个span字段然后根据父组件传入的参数生成子组件最好我们打印子组件的信息即可。通过我多次ai探索最后成功了。
子组件代码
media print 这个我要讲一下这是控制在打印界面打印的参数这是css中的知识我一开始不晓得慢慢问ai和网上查资料晓得的。
templatediv idprintable-areadiv v-for(item, index) in printData :keyindex classprint-itemdiv classcentered-content stylefont-size: 40px; margin-top: 55px图号:span styleborder-bottom: 1px solid black; display: inline-block; width: 300px;{{ item.figureNumber }}/spanbr名称:span styleborder-bottom: 1px solid black; display: inline-block; width: 300px;{{ item.name }}/spanbr编号:span styleborder-bottom: 1px solid black; display: inline-block; width: 300px; {{ item.number }}/spanbr研制阶段:span styleborder-bottom: 1px solid black; display: inline-block; width: 300px; {{ item.developmentPhase }}/spanbr出厂时间:span styleborder-bottom: 1px solid black; display: inline-block; width: 300px; {{ item.factoryTime }}/spanbr/divbrdiv v-ifindex printData.length - 1 classpage-break/div/div/div
/templatescript
import {defineComponent} from vue;export default defineComponent({props: {queryParam: Array},setup(props) {const printData props.queryParam;return { printData };}
});
/scriptstyle
media print {body {background: none !important;text-align: center; /* 让 body 内容居中 */}page {size: 15cm 12cm; /* 设置纸张大小为A4 */margin:0; /* 设置页边距 */}.noprint {display: none;}body {background: none !important;}.page-break {page-break-before: always;}}
/style
父组件
这是element 抽屉我是为了看参数有没有传入进去用来测试的。我是通过一个按钮来实现对子组件传参把参数传给子组件。 div idprintAreael-drawer v-modeldrawer titleI am the title :with-headerfalsePrint refprintComponent :query-paramprintData/Print/el-drawer/div
打印按钮的按钮事件根据这个按钮去后端获取参数我这里 state.printData xGridProduct.value?.getTableData().tableData其实就是去后端获取参数去了因为这是公司的前端框架基于vxe的包装的方法获取了一个表格信息相当于获取参数。 el-button typesuccess plain clickprint打印/el-button
这里也很关键中间我遇到一个问题那就是经常第一次点击按钮dom元素没有加载完就弹出打印框了所以我加了一个异步事件还有记得把抽屉关了。 state.printData xGridProduct.value?.getTableData().tableDatastate.drawer true// 使用nextTick确保DOM更新后执行nextTick(() {const printableElement document.querySelectorAll(.print-item);console.log(printableElement);func.getPrint()// 确保在抽屉隐藏之前获取到元素state.drawer false;}); func.getPrint() 就是我打印功能实际实现为什么我这里是func因为公司把所有方法都放在fun里面节约了导出免得一个个导出。我们要用直接点就行了。
中间注释的是windo打印的方法但是不晓得为啥子关于打印的分页功能没有实现我其实很迷惑。
但是使用这个popupWin就成功了。
讲一下大概思路因为我前端写了比较少所以理解这些还是花了一点点时间。
querySelectorAll 因为我们组件有class名字根据class名字获取 了nodelist一个元素数组。其实每个元素数组中就是前端的信息。
对了千万不要使用querySelectorOne我ai生成的时候发现为什么只打印了一个信息一开始我以为是我分页没有生效其实是我只获取了一个node。 const printableHTML Array.from(printableElement).map(el { return el.outerHTML; }).join();
这是获取子组件的html元素因为node节点里面要通过outerHTML才能获取反正里面也有很多方法可以看看我有点记不到了。
后面的思路就简单开一个新窗口然后把你从子节点获取的html元素放到这个窗口中然后打印这个窗口最后实现。
getPrint:(){const printableElement document.querySelectorAll(.print-item);console.log(printableElement);// 将 NodeList 转换为字符串并添加分页符// const printableHTML Array.from(printableElement).map(el {// return div stylepage-break-after: always;${el.outerHTML}/div;// }).join();const printableHTML Array.from(printableElement).map(el {return el.outerHTML;}).join();// console.log(printableHTML)// let bodyHtml document.body.innerHTML //获取整个页面内容// document.body.innerHTML printableHTML// window.print() //打印// document.body.innerHTML bodyHtml//还原页面内容// location.reload()const popupWin window.open(, _blank, width700,height1000,scrollbarsno,menubarno,toolbarno,locationno,statusno,titlebarno);popupWin.document.write(htmlheadtitlePrint tab/titlestylebody {background: none !important;text-align: center; /* 让 body 内容居中 */}media print {.noprint {display: none;}page {size: 18cm 15cm; /* 设置纸张大小为A4 */margin:0; /* 设置页边距 */}.noprint {display: none;}.page-break {page-break-before: always;}}/style/headbody${printableHTML}/body/html);popupWin.document.close();popupWin.focus();popupWin.print();popupWin.close();},
最后我给大家放下效果图还有多多点赞我为了完成这个功能网上看了博客都没找到。
虽然最好我是通过ai加上自己人脑慢慢摸索的哈哈。
