vue之如何实现打印功能

更新时间：2023年11月18日 09:19:47 作者：Cherry☼

这篇文章主要介绍了vue之如何实现打印功能问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

这里用的是 vuePlugs_printjs

首先打开 git项目地址
然后将 print.js 下载到本地放入项目文件夹，使用方法如下：

//1.首先在main.js引入
import Print from './utils/print.js'
Vue.use(Print)
//2.在页面使用
<div ref=print>打印内容<div/>
//3.其次在你用到的地方触发这个方法即可
handleprinter() {
     this.$print(this.$refs.print);
}

当然也可以参考官方的是使用方法：

vue打印插件使用方法

import Print from '@/plugs/print'
Vue.use(Print) // 注册
	
<template>
	<section ref="print">
				打印内容
		<div class="no-print">不要打印我</div>
	</section>
</template>

this.$print(this.$refs.print) // 使用

注意事项：

需使用ref获取dom节点，若直接通过id或class获取则webpack打包部署后打印内容为空指定不打印区域

 // 方法一. 添加no-print样式类
<div class="no-print">不要打印我</div>
 // 方法二. 自定义类名
 <div class="do-not-print-me-xxx">不要打印我</div>
 // 使用
this.$print(this.$refs.print,{'noPrint':'.do-not-print-me-xxx'})

假设会出现打印不全的问题，可以通过缩放来进行设置，数值越小，缩放的越小。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vite+vue3+ts项目新建以及解决遇到的问题
vite是一个基于Vue3单文件组件的非打包开发服务器,它具有快速的冷启动,不需要等待打包操作,下面这篇文章主要给大家介绍了关于vite+vue3+ts项目新建以及解决遇到的问题的相关资料,需要的朋友可以参考下
2023-06-06
vue proxytable代理根路径的同时增加其他代理方式
这篇文章主要介绍了vue proxytable代理根路径的同时增加其他代理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue项目如何部署到Tomcat服务器上
这篇文章主要介绍了Vue项目如何部署到Tomcat服务器上,Vue中自带webpack,可以通过一行命令将项目打包,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-03-03
Vue+Springboot实现接口签名的示例代码
这篇文章主要介绍了Vue+Springboot实现接口签名的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
Vue2+Element-ui实现el-table表格自适应高度的案例
这篇文章主要介绍了Vue2+Element-ui实现el-table表格自适应高度的案例,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-06-06
vue使用自定义指令实现按钮权限展示功能
这篇文章主要介绍了vue中使用自定义指令实现按钮权限展示功能，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-04-04
详解vite如何支持cjs方案示例
这篇文章主要介绍了vite如何支持cjs方案示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
Vue父子组件通讯的四种方法详解
父子组件通讯是指在前端开发的组件化架构中,父组件与子组件之间互相传递数据和触发功能的一种机制,这种机制使得组件能够保持独立性的同时,也能协同工作,本文给大家介绍了Vue父子组件通讯的四种方法,需要的朋友可以参考下
2024-07-07
Vue3插槽(slot)使用方法详解
在VUE开发项目的过程中,插槽<slot>是重要的承载分发内容的出口,下面这篇文章主要给大家介绍了关于Vue3插槽(slot)使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
浅谈Ant Design Pro 菜单自定义 icon
这篇文章主要介绍了Ant Design Pro 菜单自定义 icon，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11