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

最新推荐文章于 2024-06-20 17:44:10 发布

viceen

最新推荐文章于 2024-06-20 17:44:10 发布

阅读量1.5k

点赞数 1

分类专栏：工具文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44867717/article/details/128178668

版权

工具专栏收录该内容

163 篇文章 6 订阅

订阅专栏

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", // 这里是要打印元素的ID
            popTitle: "&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>