vue实现打印功能(vue-print-nb)
一、安装vue-print-nb
Vue2.0版本安装方法:
npm install vue-print-nb --save
Vue3.0版本安装方法:
npm install vue3-print-nb --save
二、引入Vue项目
Vue2.0引入方式:
// 1. 全局挂载
import Print from 'vue-print-nb'
Vue.use(Print)// or// 2. 自定义指令
import print from 'vue-print-nb'
directives: {print
}
Vue3.0引入方式:
// 1. 全局挂载
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')// or // 2. 自定义指令
import print from 'vue3-print-nb'directives: {print
}
三,在组件中使用
注意:一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id
<!--//通过按钮来调用-->
<el-button type="primary" @click="dialogVisible" v-print="printObj">打印</el-button><!--//需要打印的页面-->
<div id="printMe" ref="printContent"><div class="hammer"><h3>黄山市机动车排放维修治理(M)站竣工出厂合格证</h3></div><!-- //内容 --><div class="trail"><p>该车经我站治理维护,准予出厂。</p></div>
</div>
data的return中
name: "print",data() {return {pageList: [],status: false,printObj: {id: "myPrint", // 这里是要打印元素的IDpopTitle: " ", // 打印的标题extraCss: "", // 打印可引入外部的一个 css 文件extraHead: "", // 打印头部文字},};},
vue-print-nb插件的一些优化
1.去掉页眉页脚
<style>
@page {size: auto;margin: 0mm;}
</style>
2.打印內容不自动换行问题
只需要给不自动换行的标签加上 word-wrap:break-word;
即可。
<style>.procedure{word-wrap:break-word;}
</style>
vue实现打印功能(vue-print-nb)相关推荐
- vue实现打印功能的两种方法/web打印控件
第一种方法:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入 安装好以后在main.js文件中引入 1 2 import Print fro ...
- vue 批量打印功能 打印自定义表格table
vue 批量打印功能 打印自定义表格table 批量打印功能 需求图 1.用excle先画出来 2.然后变为代码 点击文件 - - 另存为 - - 浏览 - - 保存类型(网页) - - 保存 然后在 ...
- 打印功能window.print()
打印功能window.print() 1. window.print()打印其实打印的是整个当前网页 2. 3. 样式问题 如果使用less,scss 是不会生效的 只能使用css语言格式, 就是不能 ...
- Vue实现打印功能最简单的方法
摘要: 今天做了一个ERP系统打印订单的功能,下面是效果图: 查了很多资料,一开始我直接用print.js这个插件,虽然能实现打印功能,但是当你需要打印的表格数据太多了,就无法实现分页打印,为了不浪费 ...
- vue打印兼容xp32位系统/vue的打印功能
文章目录 一.vue-print-nb 二.vuePlugs_printjs 一.vue-print-nb 这个插件很好用,也很简单,但是问题就是不兼容xp32位. 官方安装及使用文档 1.安装 np ...
- vue 实现打印功能
1.下载插件vue-print-nb Vue2.0 版本安装 npm install vue-print-nb --save Vue3.0 版本安装 npm install vue3-print-nb ...
- Vue - 下载打印功能,将页面下载打印为 pdf 格式文件(vue-print-nb)
Vue 使用 vue-print-nb 插件实现打印功能 一. vue-print-nb 的使用 1.1 安装 vue-print-nb 1.2. 引入vue-print-nb 二. 一个打印实例 使 ...
- 前端打印功能css print
下面是关于前端打印功能的几种整理,大家有什么好的方法,还望提出...先谢谢啦 第一种:jquery有个打印功能的API(PrintArea) 不过这个特别要注意一个就是打印出新空白,查看源码,在源码中 ...
- vue实现打印功能,并多页打印
一.下载 网上的源码只能打印一页,这个源码是修改过的可以直接保存使用 全选复制 另存为print.js // 打印类属性.方法定义 /* eslint-disable */ const Print = ...
最新文章
- 如何保存Tensorflow中的Tensor参数,保存训练中的中间参数,存储卷积层的数据
- redis(nosql数据库)
- 设计模式-策略模式和工厂模式结合使用
- php 自动验证 正则表达,使用正则表达式验证登录页面的输入内容
- nginx开发简单的http模块
- 使用VS Code 从零开始开发并调试.NET Core 应用程序
- aix 安装oracle9,IBM P570 小型机AIX5.3系统安装ORACLE9i
- ibatis mysql 自增_mybatis自增主键
- php 文件类型 html,HTML的文档类型怎么选择
- ZZULIOJ ASCII码排序(多实例测试)
- 值得收藏的8个Web端组件库
- Android笔记 - android 类型转化错误
- mybatis扩展ResultMap
- swoole 固定包头格式
- [android]加载大量图片避免OOM
- java获取响应网页源代码
- 拓端tecdat|R语言无监督学习:PCA主成分分析可视化
- mysql auto_increment建表_如何在MySQL中已创建的表中插入AUTO_INCREMENT
- [Asp.Net web api]基于自定义Filter的安全认证
- win10解决已禁用输入法和隐藏中文简体美式键盘
热门文章
- 台式计算机电源接线图,机箱风扇电源怎么接线?机箱风扇电源线接法图解教程...
- 机器学习的基本数学知识1
- 职业院校技能大赛中职组 计算机辅助设计(建筑cad)比赛题目,山东省职业院校技能大赛中职组“计算机辅助设计工业产品CAD”样题.pdf...
- HTML-设置超链接
- 联想Y410p 重新装cn windows 8 1 x64 dvd 2707237系统步骤及问题解决
- Spring Boot实战:整合Redis、MyBatis,封装RedisUtils工具类
- java-php-python-ssm携手同游旅游社交平台计算机毕业设计
- 代码能力,程序员自我修养之基石
- ICLR 2021 | Autoregressive Entity Retrieval
- 移动办公软件哪个?移动办公平台有哪些?哪个性价比高?