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

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

总结

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

您可能感兴趣的文章:

在Vue3项目中使用Jest配置生成测试报告的示例详解
在Vue 3项目中使用Jest进行单元测试是一种常见的做法,它可以帮助我们验证代码的正确性和稳定性,本文将介绍如何在Vue 3项目中配置Jest,以生成测试报告,需要的朋友可以参考下
2023-09-09
tdesign vue初始化组件源码解析
这篇文章主要为大家介绍了tdesign vue初始化组件源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
Vue路由自动添加#的问题及解决
这篇文章主要介绍了Vue路由自动添加#的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
解决vue组件中click事件失效的问题
今天小编就为大家分享一篇解决vue组件中click事件失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
创建项目及包管理yarn create vite源码学习
这篇文章主要为大家介绍了创建项目及包管理yarn create vite源码学习分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
vue+flv.js+SpringBoot+websocket实现视频监控与回放功能
vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2022-02-02
vue如何根据不同的环境使用不同的接口地址
这篇文章主要介绍了vue如何根据不同的环境使用不同的接口地址问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
这篇文章主要介绍了vuejs项目打包之后的首屏加载优化及打包之后可能出现的问题,需要的朋友可以参考下
2018-04-04
使用vue-json-viewer实现JSON数据可视化详解
vue-json-viewer 是一个用于在 vue.js 应用中展示 JSON 数据的插件,它提供了一种直观和美观的方式来可视化 JSON 数据,下面我们来看看如何使用它进行JSON数据可视化吧
2025-01-01
关于vue-router的那些事儿
要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题，感兴趣的朋友跟随脚本之家小编一起学习吧
2018-05-05