Vue实现浏览器打印功能的代码

2020-06-16 06:57:31易采站长站整理

// 制作打印模版组件时,props区域尽量保留。
props: {
// 接受的打印数据,此处父子组件传值,在子组件(模板)定义一个对象(若为集合或者其他类型,自行定义)tableData,用于接收父组件传递的值,
tableData: {},

// 每页多少行
onePageRow: {
type: Number,
default: 5
},
// 是否插入空白行
blankLines: {
type: Boolean,
default: true
},
getChineseNumber: Function // 求数字的中文写法,从easyPrint组件传入
},
computed: {
pages() {
console.log(this.tableData);
// 求当前数据能打印的页数
/* var pages_ = Math.ceil(this.tableData.detail.length / this.onePageRow); // 向上取整数*/
// return pages_ <= 0 ? 1 : pages_;
return 1;
},
chineseTotal() {
// 计算中文合计,如果忘记传入
return this.getChineseNumber != null
? this.getChineseNumber(this.tableData.total_amount)
: "您还没有传入getChineseNumber";
}
},

methods: {

test() {
console.log("21111111111111");
console.log("test");
}
}
};

实现功能的界面如下:

在这里插入图片描述

在这里插入图片描述

总结

到此这篇关于Vue实现浏览器打印功能的文章就介绍到这了,更多相关vue 浏览器打印内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网!