前端vue3打印功能实现(多页打印、不使用插件)
更新时间：2024年09月27日 10:21:54 作者：实名上网张瀚文
在Vue项目中实现打印功能是前端开发中常见需求之一,这篇文章主要介绍了前端vue3打印功能实现的全部过程,文中介绍的方法实现了多页打印并且不使用插件,需要的朋友可以参考下
说下总体思路，创建一个组件，里面放多个span字段，然后根据父组件传入的参数，生成子组件，最好我们打印子组件的信息即可。通过我多次ai，探索最后成功了。
子组件代码
@media print 这个我要讲一下，这是控制在打印界面，打印的参数，这是css中的知识，我一开始不晓得，慢慢问ai和网上查资料晓得的。
<template>
<div id="printable-area">
<div v-for="(item, index) in printData" :key="index" class="print-item">
<div class="centered-content" style="font-size: 40px; margin-top: 55px">
图号:<span style="border-bottom: 1px solid black; display: inline-block; width: 300px;">{{ item.figureNumber }}</span><br>
名称:<span style="border-bottom: 1px solid black; display: inline-block; width: 300px;">{{ item.name }}</span><br>
编号:<span style="border-bottom: 1px solid black; display: inline-block; width: 300px; ">{{ item.number }}</span><br>
研制阶段:<span style="border-bottom: 1px solid black; display: inline-block; width: 300px; ">{{ item.developmentPhase }}</span><br>
出厂时间:<span style="border-bottom: 1px solid black; display: inline-block; width: 300px; ">{{ item.factoryTime }}</span><br>
</div>
<br>
<div v-if="index < printData.length - 1" class="page-break"></div>
</div>
</div>
</template>
<script>
import {defineComponent} from 'vue';
export default defineComponent({
props: {
queryParam: Array
},
setup(props) {
const printData = props.queryParam;
return { printData };
}
});
</script>
<style>
@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 id="printArea">
<el-drawer v-model="drawer" title="I am the title" :with-header="false">
<Print ref="printComponent" :query-param="printData"></Print>
</el-drawer>
</div><el-button type="success" plain @click="print">打印</el-button>
这里也很关键，中间我遇到一个问题，那就是经常第一次点击按钮，dom元素没有加载完，就弹出打印框了，所以我加了一个异步事件，还有记得把抽屉关了。
//这里获取后端参数
state.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 style="page-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', 'width=700,height=1000,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
<style>
body {
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>
</head>
<body>
${printableHTML}
</body>
</html>
`);
popupWin.document.close();
popupWin.focus();
popupWin.print();
popupWin.close();
},最后我给大家放下效果图，还有多多点赞，我为了完成这个功能，网上看了博客，都没找到。
虽然最好我是通过ai加上自己人脑慢慢摸索的，哈哈。
总结
到此这篇关于前端vue3打印功能实现的文章就介绍到这了,更多相关前端vue3打印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue 3 提供了多种数据传递的方式,让我们的组件之间可以尽情地交流,接下来,我们就直接一个个来看,这些方式都是怎么工作的,感兴趣的小伙伴跟着小编一起来看看吧2024-07-07
这篇文章主要介绍了vue-router之解决addRoutes使用遇到的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Vue编译器实现代码生成方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-01-01
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于vuex新手进阶篇之取值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
Ant Design Vue table中列超长显示...并加提示语的实例
这篇文章主要介绍了Ant Design Vue table中列超长显示...并加提示语的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
本篇文章主要介绍了Vue组件开发初探，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要为大家介绍了代理模式在vue中的使用示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要为大家详细介绍了Vue如何利用高德地图API实现实时天气,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
elementUI动态表单 + el-select 按要求禁用问题
这篇文章主要介绍了elementUI动态表单 + el-select 按要求禁用问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue render深入开发讲解2018-04-04
最新评论