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'})

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

总结

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

您可能感兴趣的文章:

mpvue将vue项目转换为小程序
这篇文章主要介绍了mpvue将vue项目转换为小程序的相关资料及mpvue开发流程，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-09-09
vue-router3.x和vue-router4.x相互影响的问题分析
这篇文章主要介绍了vue-router3.x和vue-router4.x相互影响的问题分析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
解决VUE打包后与nginx代理出现加载速度超级慢的问题
这篇文章主要介绍了解决VUE打包后与nginx代理出现加载速度超级慢的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-09-09
uniapp使用webView工作实践记录
uni-app中的web-view是一个web浏览器组件,可以用来承载网页的容器,下面这篇文章主要给大家介绍了关于uniapp使用webView的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-06-06
Vue中的计算属性介绍
这篇文章主要介绍了Vue中的计算属性,模板内的表达式,用于简单运算,但是模板中放入太多的逻辑会让模板过重且难以维护，更多具体内容一起进入下面文章学习吧,需要的朋友也可以参考一下
2021-12-12
vue实现app页面切换动画效果实例
本篇文章主要介绍了vue实现app页面切换动画效果实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
Vue中的slot使用插槽分发内容的方法
这篇文章主要介绍了Vue中的slot使用插槽分发内容的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
vue.js默认路由不加载linkActiveClass问题的解决方法
这篇文章主要给大家介绍了关于vue.js默认路由不加载linkActiveClass问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-12-12
解决vue语法会有延迟加载显现{{xxx}}的问题
今天小编就为大家分享一篇解决vue语法会有延迟加载显现{{xxx}}的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘Combin
这篇文章主要介绍了vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly...Vetur（2339），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09