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

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

vue如何实现打印功能相关推荐

vue中实现打印功能的方法与注意事项
vue中实现打印功能的方法与注意事项一.使用方法: 1. 在HTML中 2. 在VUE项目中二.问题总结 1. 设置打印方向 2. 设置打印高度 1. 单张打印 2. 循环打印 3. 获取打印操作 ...
Vue页面实现打印功能
实现打印功能,需要安装一个插件vue-print-nb,使用方法如下 1)安装全局的插件 npm install vue-print-nb -S 2)在main.js中注册 import Print ...
vue 实现发票打印功能
参考资料 JS实现快递单打印功能[推荐] 原生,不用 vue实现打印功能的两种方法推荐 js 实现打印功能 jq插件原生js打印插件Print.js print插件 vue原生js打印插件 js解 ...
VUE中实现打印功能插件—vue-easy-print
话不多说直接上代码 1.安装插件:注意版本号 npm install vue-easy-print --save 我用的是0.0.8版本 npm install vue-easy-print@0.0. ...
vue html页面打印功能vue-print-nb
vue项目中,HTML页面打印功能组件vue-print-nb 源码: https://github.com/shengbid/vue-print, https://github.com/sheng ...
【vue】实现打印功能
文章目录一.vue-print-nb [1]安装 [2]引用 [3]API [4]示例代码 [5]vue-print-nb插件的一些优化 [6]注意事项: 二.print.js :解决了无法打印本地 ...
打印机支持打印html页面吗,vue下调用打印功能，打印html页面
wo我今天翻博客,csdn上面有一篇关于我之前记录的工具函数打印html元素的js工具函数没了.我纳闷了,csdn就不重新补了,换掘金来记录. 主要解决: 会有项目需求说要求在html页面下调用打印机 ...
vue表格数据打印功能的实现
1.安装npm install vue-print-nb --save 2.引入// 安装好以后在main.js文件中引入 import Print from 'vue-print-nb' Vue.u ...
vue项目实现打印功能
使用的一个叫做"vue-print-nb"的插件,具体步骤: 1.下载插件:npm install vue-print-nb --save 2.在main导入并注册: // 打印 ...

vue如何实现打印功能

这里用的是 vuePlugs_printjs

vue如何实现打印功能相关推荐

最新文章

热门文章