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

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

总结

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

您可能感兴趣的文章:

vue2实现数据请求显示loading图
这篇文章主要为大家详细介绍了vue2实现数据请求显示loading图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
Vue中使用Element UI的Table组件实现嵌套表格功能
这篇文章主要介绍了Vue中使用Element UI的Table组件实现嵌套表格功能,演示如何在Vue中使用Element UI的Table组件实现嵌套表格,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-01-01
vue-resource:jsonp请求百度搜索的接口示例
今天小编就为大家分享一篇vue-resource:jsonp请求百度搜索的接口示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue中van-picker的选项插槽的使用
这篇文章主要介绍了vue中van-picker的选项插槽的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Nginx同一端口部署多个前后端分离的vue项目完整步骤
最近做项目结构优化,前端项目都是部署在nginx上,想实现同一个端口可以访问多个前端项目,所以就有了本文,这篇文章主要给大家介绍了关于Nginx同一端口部署多个前后端分离的vue项目的相关资料,需要的朋友可以参考下
2023-10-10
vue项目之webpack打包静态资源路径不准确的问题
这篇文章主要介绍了vue项目之webpack打包静态资源路径不准确的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue父子组件之间事件通信示例解析
这篇文章主要介绍了React中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2023-03-03
查看vue版本号以及vue/cli脚手架版本号方式
这篇文章主要介绍了查看vue版本号以及vue/cli脚手架版本号方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
解决vue app.js/vender.js过大优化启动页
这篇文章主要为大家介绍了解决vue app.js/vender.js过大优化启动页过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
Vue2.0中集成UEditor富文本编辑器的方法
本文给大家详细讲述了Vue2.0中集成UEditor富文本编辑器的方法以及相关注意事项做了讲述，有兴趣的朋友学习下。
2018-03-03