vue中打印插件vue-print-nb(一)—

vue中打印插件vue-print-nb(一)——基本示例

npm地址：https://www.npmjs.com/package/vue-print-nb

下载print.js地址：https://github.com/xyl66/vuePlugs_printjs

安装

npm i vue-print-nb
npm install vue-print-nb --save

1、main.js中引用

import Print from 'vue-print-nb'
// 全局引用
Vue.use(Print);

2、页面使用

index.vue

<template><div><div ref="paper">4567</div><div id="single-info"><el-form label-width="160px"><el-row align="center" style="margin-top: 30px"><el-col :span="24" align="center"><el-button id="info-btn" v-print="'#single-info'" @click="prints">打印</el-button></el-col></el-row></el-form></div></div>
</template>
<script>
export default {data() {return {};},methods: {prints() {var prints = document.getElementById("single-info");prints.title = "打印的标题";},},
};
</script>

<template><div><!--//通过按钮来调用--><el-button type="primary" v-print="printObj">打印</el-button><!--//需要打印的页面--><div id="printMe" ref="printContent"><div class="hammer"><h3>打印的标题</h3></div><!-- //内容 --><div class="trail"><p>打印的内容。</p></div></div></div>
</template>
<script>
export default {data() {return {name: "print",data() {return {pageList: [],status: false,printObj: {id: "myPrint", // 这里是要打印元素的IDpopTitle: "&nbsp", // 打印的标题extraCss: "", // 打印可引入外部的一个 css 文件extraHead: "", // 打印头部文字},};},};},methods: {},
};
</script>

效果

去掉页眉页脚

<style>
@page {size: auto;margin: 0mm;}
</style>

打印內容不自动换行问题

只需要给不自动换行的标签加上 word-wrap:break-word; 即可。

<style>.procedure{word-wrap:break-word;}
</style>

api参数

属性	类型	默认值	必要	可选值	描述
id	String	-	是	-	范围打印 ID（如果设置url则可以不设置id）
url	String	-	否	-	打印指定的 URL。（不允许同时设置ID）
popTitle	String	-	否	-	默认使用浏览器标签名，为空时为undefined
standard	String	HTML5	否	html5，loose，strict	打印的文档类型
extraHead	String	-	否	-	在节点中添加 DOM 节点，并用,(Print local range only)分隔多个节点
extraCss	String	-	否	-	新的 CSS 样式表，并使用,（仅打印本地范围）分隔多个节点
openCallback	Function	-	否	-	调用打印工具成功回调函数
closeCallback	Function	-	否	-	关闭打印工具成功回调函数
beforeOpenCallback	Function	-	否	-	调用打印工具前的回调函数
preview	Boolean	false	否	true,false	预览工具
previewTitle	String	-	否	-	‘打印预览’
previewPrintBtnLabel	String	打印	否	-	打印按钮名称
previewBeforeOpenCallback	Function	-	否	-	预览打开前回调函数
previewOpenCallback	Function	-	否	-	预览打开回调函数
clickMounted	Function	-	否	-	点击打印按钮回调函数

vue2中引用

import Print from 'vue-print-nb'
// 全局引用
Vue.use(Print);// 或者// 单组件引用
import print from 'vue-print-nb'
// 在自定义指令中注册
directives: {print
}

vue3中引用

// 全局引用
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')// 或者// 单组件引用
import print from 'vue3-print-nb'
// 在自定义指令中注册
directives: {print
}

示例代码

全页面打印

<button v-print>打印整个页面</button>

局部打印

（Tip：被打印的区域需要被渲染出来并且不能被隐藏才可以打印）

<template><div><button v-print="printOption">NB打印</button><div id="nbprint"><table><tr><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>手机</th><th>邮箱</th><th>地址</th><th>工龄</th><th>岗位</th><th>薪资</th></tr><tr v-for="(item, index) in list" key="index"><td>{{ index + 1}}</td><td>{{ item.name }}</td><td>{{ item.age }}</td><td>{{ item.sex }}</td><td>{{ item.phone }}</td><td>{{ item.mail }}</td><td>{{ item.address }}</td><td>{{ item.workAge }}</td><td>{{ item.jobs }}</td><td>{{ item.salary }}</td></tr></table></div></div>
</template><script>export default {name: "nb-print",data() {return {printOption: {id: 'nbprint', // 打印元素的id 不需要携带#号popTitle: '员工信息' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言},list: [{name: "阿哒",age: 26,sex: "男",phone: "12345678901",mail: "mmm@mmm.com",address: "蓝星星国马尔哈哈海岛",workAge: 2,jobs: "研发",salary: "1.8k"},{name: "阿荣",age: 24,sex: "男",phone: "12345678901",mail: "mmm@mmm.com",address: "蓝星星国马尔哈哈海岛",workAge: 1,jobs: "研发",salary: "1.8k"},{name: "阿豪",age: 26,sex: "男",phone: "12345678901",mail: "mmm@mmm.com",address: "蓝星星国马尔哈哈海岛",workAge: 5,jobs: "产品",salary: "1.8k"},{name: "阿晨",age: 29,sex: "男",phone: "12345678901",mail: "mmm@mmm.com",address: "蓝星星国马尔哈哈海岛",workAge: 9,jobs: "设计",salary: "1.8k"},{name: "阿震",age: 30,sex: "男",phone: "12345678901",mail: "mmm@mmm.com",address: "蓝星星国马尔哈哈海岛",workAge: 7,jobs: "销售",salary: "1.8k"},{name: "阿锋",age: 21,sex: "男",phone: "12345678901",mail: "mmm@mmm.com",address: "蓝星星国马尔哈哈海岛",workAge: 0.1,jobs: "售后",salary: "1.8k"}]}}}
</script>

打印预览

<script>export default {name: "nb-print",data() {return {printOption: {id: 'nbprint', // 打印元素的id 不需要携带#号preview: true, // 开启打印预览previewTitle: '打印预览', // 打印预览标题popTitle: '员工信息', // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言// 头部文字 默认空 在节点中添加 DOM 节点， 并用,(Print local range only)分隔多个节点extraHead:'https://***/***.css, https://***/***.css', // 新的 CSS 样式表， 并使用,（仅打印本地范围）分隔多个节点extraCss: '<meta http-equiv="Content-Language"content="zh-cn"/>',previewBeforeOpenCallback: () => {console.log("触发打印预览打开前回调");},previewOpenCallback: () => {console.log("触发打开打印预览回调");},beforeOpenCallback: () => {console.log("触发打印工具打开前回调");},openCallback: () => {console.log("触发打开打印工具回调");},closeCallback: () => {console.log("触发关闭打印工具回调");},clickMounted: () => {console.log("触发点击打印回调");}}}}}
</script>

分页打印

<template><div><button v-print="'#nbprint'">NB打印</button><div id="nbprint">// 方法一// 使用div包裹需要分页的块 使用 css属性 page-break-after:always进行分页<div style="page-break-after:always">这是第二页</div><div style="page-break-after:always">这是第二页</div></div></div>
</template><style>// 方法二// 使用媒体查询 在打印时设置 body 和 html 的高度为auto@media print {@page {size:  auto;}body, html {height: auto !important;}}
</style>

vue中打印插件vue-print-nb(一)——基本示例相关推荐

vue中打印表格，打印不全的问题
vue中打印表格,打印不全的问题 html部分 <TableDetailsclass="table-box"ref="inventoryDetails"& ...
[vue] 怎么在vue中使用插件？
[vue] 怎么在vue中使用插件? npm 安装然后再main.js 引入最后 vue.use(插件名) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
Vue中的插件小练习
提到vue插件,想必大家一下想到就是官方推荐的vue-router.vue等,功能还是蛮强大的,那,我们一直在使用插件,那是否也可以开发一个自己的插件呢? 开发插件: 插件通常会为vue添加全局功能, ...
vue封装打印插件print.js实现打印组件功能
代码插件地址:https://github.com/xyl66/vuePlugs_printjs 1. 打印插件属性方法定义-print.js // 打印类属性.方法定义 /* eslint-di ...
Vue中打印网页的指定部分的几种方法
楔子这里是以下会用到的一些知识和说明可以在GitHub上下载打印插件,但是自己写更简单,所以我就自己写了本例为打印网页上的一个表格 window.print()打印的是整个网页的HTML内容,不 ...
vue中devTools插件安装教程
vue-devTools 为了更方便的在开发过程中对 Vue 程序进行调试,除了传统的浏览器自带的 debug 工具以外,我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试 vue-devTo ...
怎么看vue中某个插件是否安装成功_如何在谷歌中查看VUEX（谷歌浏览器中安装 vue调试工具 vue-devtools）...
本次介绍了两种方法,第一种方法略微复杂,想追求效率的请查看第二种. 20200214141007961.png 如果你在使用vue开发项目浏览器中没有安装vue调试工具显然不能算是一个合格的vue ...
sublime Text Vue中常用插件汇总说明
开发vue的常用插件 1.让vue文件高亮: 安装: Vue Syntax Highlight 2.让script里面的es6代码高亮: 安装:ecmascript syntax 安装:vuejs c ...
简单易用的JQuery网页内容打印插件——jQuery.print.js
1. 官方网址下载jQuery.print.js.配置参数介绍.官方Demo 2. 简介: jQuery.print是一款简单易容且功能强大的网页内容打印jQuery插件.该网页打印插件可以打印指定 ...

vue中打印插件vue-print-nb(一)——基本示例

vue中打印插件vue-print-nb(一)——基本示例

去掉页眉页脚

打印內容不自动换行问题

api参数

vue2中引用

vue3中引用

示例代码

全页面打印

局部打印

打印预览

分页打印

vue中打印插件vue-print-nb(一)——基本示例相关推荐

最新文章

热门文章