vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格,
在网上找了一个打印组件vue-print-nb
使用方式
安装 npm install vue-print-nb --save
在main.js文件中注册
import Print from 'vue-print-nb'
Vue.use(Print);
页面中使用,给需要打印的容器加一个id,打印按钮传入这个id
html:
|
葫芦娃,葫芦娃
一根藤上七朵花
小小树藤是我家 啦啦啦啦
叮当当咚咚当当 浇不大
叮当当咚咚当当 是我家
啦啦啦啦
...
:disabled=``"detail"
type=``"textarea"
:rows=``"4"
:maxlength=``"2000"
placeholder=``""
v-model=``"form.describle"``>
Print local range
|
点击打印按钮,就可以打印页面了
image
image
在使用这个插件过程中遇到一个问题,普通的input标签内容展示没问题,textarea文本域这种内容就展示不出来,检查了一下插件,发现作者在给表单赋值的时候用的是value值,这种赋值对于一些双标签的表单就无效,需要修改一下
image
这种直接改包的方法也不太好,如果其他人下载你的代码,也需要修改包,所以,最好把这个包拿出来,放在文件中,在main.js直接引用
image
main.js 引用 import Print from '@/utils/vue-print-nb/'
image