vue-print 实现打印功能
目录
- 一、安装
- 1. Vue2
- 2. Vue3
- 二、基本使用
- 1. 直接打印页面HTML
- 2. 个性化设置
- 3. 打印URL
- 三、API
一、安装
1. Vue2
npm install vue-print-nb --save
import Print from 'vue-print-nb'
// Global instruction
Vue.use(Print);//or// Local instruction
import print from 'vue-print-nb'directives: {print
}
2. Vue3
npm install vue3-print-nb --save
// Global instruction
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// Local instruction
import print from 'vue3-print-nb'directives: {print
}
二、基本使用
1. 直接打印页面HTML
1)方法
① 给要打印的部分设置一个 id
② 在打印按钮中添加 v-print="'#id名'"
2)代码(以表格为例)
<template><div><a-button v-print="'#printMe'">打印</a-button><a-table :columns="columns" :data-source="data" bordered id="printMe"></a-table></div>
</template>
<script>
const columns = [{title: 'Name',dataIndex: 'name',},{title: 'Cash Assets',className: 'column-money',dataIndex: 'money',},{title: 'Address',dataIndex: 'address',},
];const data = [{key: '1',name: 'John Brown',money: '¥300,000.00',address: 'New York No. 1 Lake Park',},{key: '2',name: 'Jim Green',money: '¥1,256,000.00',address: 'London No. 1 Lake Park',},{key: '3',name: 'Joe Black',money: '¥120,000.00',address: 'Sidney No. 1 Lake Park',},
];export default {data() {return {data,columns,};},
};
</script>
2. 个性化设置
1)方法
打印按钮的 v-print
绑定一个对象
2)代码
<template><div class="box"><a-table :columns="columns" :data-source="data" bordered id="printMe"></a-table><a-button v-print="printContent" class="btn no-print">打印</a-button></div>
</template>
<script>
const columns = [{title: 'Name',dataIndex: 'name',},{title: 'Cash Assets',className: 'column-money',dataIndex: 'money',},{title: 'Address',dataIndex: 'address',},
];const data = [{key: '1',name: 'John Brown',money: '¥300,000.00',address: 'New York No. 1 Lake Park',},{key: '2',name: 'Jim Green',money: '¥1,256,000.00',address: 'London No. 1 Lake Park',},{key: '3',name: 'Joe Black',money: '¥120,000.00',address: 'Sidney No. 1 Lake Park',},
];export default {data() {return {data,columns,tableHead: '测试表格',printContent: {id: "printMe", // 打印的区域preview: false, // 预览工具是否启用previewTitle: '这是预览标题', // 预览页面的标题popTitle: '', // 打印页面的页眉extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',previewBeforeOpenCallback() {console.log('正在加载预览窗口')},previewOpenCallback() {console.log('已经加载完预览窗口')},beforeOpenCallback(vue) {vue.printLoading = trueconsole.log('打开之前')},openCallback(vue) {vue.printLoading = falseconsole.log('执行了打印')},closeCallback() {console.log('关闭了打印工具')},clickMounted(vue){console.log('点击了打印按钮');vue.printContent.popTitle = vue.tableHead // 动态设置页眉}}}}
};
</script>
3)效果展示
① 预览工具
3. 打印URL
1)方法
① 给 打印按钮的 v-print
绑定一个对象
② 对象添加 url
属性
2)代码
<template><div class="box"><a-table :columns="columns" :data-source="data" bordered></a-table><a-button v-print="printContent" class="btn no-print" >打印</a-button></div>
</template>
<script>
const columns = [{title: 'Name',dataIndex: 'name',},{title: 'Cash Assets',className: 'column-money',dataIndex: 'money',},{title: 'Address',dataIndex: 'address',},
];const data = [{key: '1',name: 'John Brown',money: '¥300,000.00',address: 'New York No. 1 Lake Park',},{key: '2',name: 'Jim Green',money: '¥1,256,000.00',address: 'London No. 1 Lake Park',},{key: '3',name: 'Joe Black',money: '¥120,000.00',address: 'Sidney No. 1 Lake Park',},
];export default {data() {return {data,columns,tableHead: '测试表格',printContent: {url: 'http://localhost:8081/', // 打印的urlpreview: false, // 预览工具是否启用previewTitle: '这是预览标题',popTitle: '', // 打印页面的页眉extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',}}},
};
</script>
三、API
Parame | Explain | Type | OptionalValue | DefaultValue |
---|---|---|---|---|
id | Range print ID, required value | String | – | – |
standard | Document type (Print local range only) | String | html5/loose/strict | html5 |
extraHead | Add DOM nodes in the node, and separate multiple nodes with , (Print local range only) | String | – | – |
extraCss | New CSS style sheet , and separate multiple nodes with ,(Print local range only) | String | – | – |
popTitle | Content of label (Print local range only) | String | – | – |
openCallback | Call the successful callback function of the printing tool | Function | Returns the instance of Vue called at that time | – |
closeCallback | Close the callback function of printing tool success | Function | Returns the instance of Vue called at that time | – |
beforeOpenCallback | Callback function before calling printing tool | Function | Returns the instance of Vue called at that time | – |
url | Print the specified URL. (It is not allowed to set the ID at the same time) | String | – | – |
asyncUrl | Return URL through ‘resolve()’ and Vue | Function | – | – |
preview | Preview tool | Boolean | – | false |
previewTitle | Preview tool Title | String | – | ‘打印预览’ |
previewPrintBtnLabel | The name of the preview tool button | String | – | ‘打印’ |
zIndex | CSS of preview tool: z-index | String,Number | – | 20002 |
previewBeforeOpenCallback | Callback function before starting preview tool | Function | Returns the instance of Vue | – |
previewOpenCallback | Callback function after fully opening preview tool | Function | Returns the instance of Vue | – |
clickMounted | Click the callback function of the print button | Function | Returns the instance of Vue | – |
vue-print 实现打印功能相关推荐
- Vue -print - nb 打印插件 使用详解 以及连打操作
Vue -print - nb 打印插件 #安装 npm install vue-print-nb --save #在main.js 全局引用 import Print from 'vue-print ...
- 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 :解决了无法打印本地 ...
- js使用window.print()实现打印功能
js使用window.print()来实现打印功能 1.首先在需要打印的内容标签上面绑定ref <div ref="tableRef">需要打印的内容 </div ...
- 打印机支持打印html页面吗,vue下调用打印功能,打印html页面
wo我今天翻博客,csdn上面有一篇关于我之前记录的工具函数打印html元素的js工具函数没了.我纳闷了,csdn就不重新补了,换掘金来记录. 主要解决: 会有项目需求说要求在html页面下调用打印机 ...
- vue如何实现打印功能
这里用的是 vuePlugs_printjs 首先打开 git项目地址 然后将 print.js 下载到本地放入项目文件夹,使用方法如下: //1.首先在main.js引入 import Print ...
最新文章
- java Excel 导入 IllegalStateException 异常处理 不同的数据类型
- 一个可以直接使用的可用iptables配置的stateless NAT实现
- HDU-6470 Count (构造矩阵+矩阵快速幂)
- 使用report clear appointment的all day flag
- P2447 [SDOI2010]外星千足虫
- 系统什么时候会用到swap分区?
- float right不生效_【工具篇】程序员不愿意写 PPT 是姿势不对?
- eclipse远程发布代码的方法(SSH自动同步)
- 应用计算机解数学模型,浅谈数学建模与计算机应用的融合
- 操作系统课程设计报告(文件系统)
- 卢菲菲数字编码表_学技树
- Struts1 和 Struts2
- cad2020直装版无需注册机
- Python中如何输入一个整数实例
- 处理:TF卡突然变成8M,格式化提示写保护
- 程序员最不想让你知道的尴尬瞬间,看完我眼睛都绿了
- 兼容ETA4056带OVP带电池反接保护和NTC小封装DFN2*2-8线性锂电池充电芯片
- 自定义UTI 注册你的APP所支持的文件类型
- RHCSA-A2.配置默认软件仓库
- 华硕a43s遇到的问题总结