vue 项目中使用打印功能

最新推荐文章于 2024-08-17 02:22:49 发布

时光回溯

最新推荐文章于 2024-08-17 02:22:49 发布

阅读量2.2k

点赞数 4

本文链接：https://blog.csdn.net/qq_43729779/article/details/107209719

版权

本文介绍了在Vue项目中实现打印功能的两种方法。第一种是利用window自带的打印功能，需要注意html和body的overflow设置以确保多页显示。第二种是使用vue-print-nb插件，但可能与富文本编辑器冲突，需要特殊处理。项目中还遇到了打印区域宽度和高度设置的问题，以及表单元素导致的打印问题，最后通过设置打印方向和边距实现了完整且居中的打印效果。

摘要由CSDN通过智能技术生成

第一种方法：使用window自带的打印功能

<template>
	<div>
	    <Button type="primary"  @click="print">打印</Button>
	    <div style="width:1000px;" ref="printContent">
	    	打印内容
	    </div>
	</div>
</template>
<script>
	except default {
    
		name:"",
		methods:{
    
			 print(){
    
				// 获取要打印的dom内容
				let  newDomHtml =  this.$refs.printContent.innerHTML;
				// 将要打印的内容赋值给本页
				window.document.body.innerHTML= newDomHtml ;
				// 调用window的打印
				window.print();
				// 解决打印之后按钮失效的问题，刷新页面