VUE整合VUE-PRINT-NB实现前端打印功能

VUE整合VUE-PRINT-NB实现前端打印功能

插件安装

npm install vue-print-nb --save

插件安装时最好在package.json中同时加入依赖信息,便于项目上其他人员拉取。

简单实现

<template>
	<div>
	  <div id="printTest" >	
      <p>赵云</p>
      <p>关羽 </p>	
      <p>马超</p>	
      <p>张飞</p>	
   </div>	
	 <button v-print="'#printTest'">打印</button>
	</div>
</template>

<script>

</script>

<style>

</style>

在需要打印的地方加上一个ID属性就好了,表格什么的操作都是这样,然后在按钮上通过v-print="'#ID'"来调用插件打印。

VUE整合VUE-PRINT-NB实现前端打印功能

图片不是上述的代码,是打印的一个表格效果。这边需要注意的一点是,更多设置里的很多选项是根据你的打印驱动来的,比如我之前在插上打印机WIN10自动安装的驱动,纸张尺寸只给了我A4和信纸两个选项,后来从官网重新安装了一份EPSON LQ-610KII的驱动,选项就很多了。

后来从官网重新安装了一份EPSON LQ-610KII的驱动,选项就很多了。

总体来说调用还是很简单的,不管是激光打印还是针式打印机,用起来还挺方便,后续看看还有没有坑。

上一篇:石头剪刀布


下一篇:CNN卷积特征可视化