- 原生打印 window.print()直接调用
vue中使用
参考链接:vue-print-nb或vuePlugs_printjs实现打印功能
安装 npm install vue-print-nb --save
全局应用/main.js
import Print from 'vue-print-nb'
Vue.use(Print);
html部分
<button v-print="printObj">Print local range</button> //打印按钮 这里可以直接绑定id
<div id="printMe" style="background:red;"> // 绑定id
<p>葫芦娃,葫芦娃</p>
<p>一根藤上七朵花 </p>
</div>
配置
export default {
data() {
return {
printObj: {
id: "printMe",
popTitle: 'good print', //打印出来的标题
extraCss: 'https://www.google.com,https://www.google.com',
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
}
};
}
}
为了解决样式问题 可以使用转图片打印
首先安装 html2Canvas和print-js
建议先安装print js
npm install print-js --save
npm install html2canvas --save
局部引用
import html2canvas from "html2canvas";
import printJS from "print-js";
<Button type="primary" ghost @click="dayin">打印</Button> 打印按钮
打印函数
dayin() {
html2canvas(this.$refs.content, {
backgroundColor: null,
useCORS: true,
windowHeight: document.body.scrollHeight
}).then(canvas => {
// let url = canvas.toDataURL('image/jpeg', 1.0)
const url = canvas.toDataURL();
this.img = url;
printJS({
printable: url,
type: "image",
documentTitle: "打印图片"
});
console.log(url);
});
}
例子
<template>
<div class="major_statistics">
<div class="function">
<el-button type="primary" disabled>导出</el-button>
<el-button type="primary" @click="printTable">打印</el-button>
</div>
<div ref="content">
<Table id="printTest" border :columns="infoTitle" :data="infoList" size="small">
<div slot="majors" slot-scope="{ row }">
<div
v-for="(it, index) in row.majors"
:key="index"
class="zhuanye"
>{{ it["专业名称"] }}</div>
</div>
<div slot="sum" slot-scope="{ row }">
<div
v-for="(it, index) in row.majors"
:key="index"
class="zhuanye"
>{{ it.majorsAll }}</div>
</div>
<div slot="nan" slot-scope="{ row }">
<div
v-for="(it, index) in row.majors"
:key="index"
class="zhuanye"
>{{ it.s_man }}</div>
</div>
<div slot="nv" slot-scope="{ row }">
<div
v-for="(it, index) in row.majors"
:key="index"
class="zhuanye"
>{{ it.s_woman }}</div>
</div>
</Table>
</div>
</div>
</template>
<script>
import { getDepartments } from "../../api/Statistics";
import html2canvas from "html2canvas"; //文档转canvas
import printJS from "print-js"; //局部打印
export default {
data() {
return {
pageQuery: {
need_major: 2,
},
tableData: [
{
id: "12987122",
name: "王小虎",
amount1: "234",
amount2: "3.2",
amount3: 10,
},
{
id: "12987122",
name: "王小虎",
amount1: "234",
amount2: "3.2",
amount3: 10,
},
{
id: "12987122",
name: "王小虎",
amount1: "234",
amount2: "3.2",
amount3: 10,
},
{
id: "12987122",
name: "王小虎",
amount1: "234",
amount2: "3.2",
amount3: 10,
},
{
id: "12987122",
name: "王小虎",
amount1: "234",
amount2: "3.2",
amount3: 10,
},
],
infoTitle: [
{
title: "院系名称",
render: (h, { row }) => {
return h("div", [
h("span", row["系名称"]),
h(
"span",
{
style: {
margin: "0 5px",
color: "red",
},
},
"(共" +
row.All +
"人, " +
"男:" +
row.manAll +
", 女:" +
row.womanAll +
"人)"
),
]);
},
},
{
title: "专业名称",
slot: "majors",
},
{
title: "录取人数",
width: 200,
slot: "sum",
},
{
title: "男生人数",
width: 200,
slot: "nan",
},
{
title: "女生人数",
width: 200,
slot: "nv",
},
],
infoList: [],
spanArr: [], //遍历数据时,根据相同的标识去存储记录
pos: 0, // 二维数组的索引
};
},
methods: {
//处理表格数据
getSpanArr(data) {
let that = this;
//页面展示的数据,不一定是全部的数据,所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱
that.spanArr = [];
that.pos = 0;
//遍历数据
data.forEach((item, index) => {
//判断是否是第一项
if (index === 0) {
this.spanArr.push(1);
this.pos = 0;
} else {
//不是第一项时,就根据标识去存储
if (data[index].moldName === data[index - 1].moldName) {
// 查找到符合条件的数据时每次要把之前存储的数据+1
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
// 没有符合的数据时,要记住当前的index
this.spanArr.push(1);
this.pos = index;
}
}
});
console.log(this.spanArr, this.pos);
},
//获取录取信息
getInfoList() {
getDepartments({ need_major: 2 }).then((res) => {
console.log(res);
this.infoList = res.data.rows;
this.infoList.forEach((it) => {
//院系
console.log(it);
it.majors.forEach((itt) => {
//专业
// console.log(itt);
let man = Number(itt.s_man);
let woman = Number(itt.s_woman);
itt.majorsAll = man + woman; //每个专业人数总和;
it.manAll = it.majors
.map((i) => Number(i.s_man))
.reduce((a, b) => a + b); //院系男生总和
it.womanAll = it.majors
.map((i) => Number(i.s_woman))
.reduce((a, b) => a + b);
it.All = it.womanAll + it.manAll;
}); //院系女生总和
});
let arr = [];
this.infoList.forEach((it) => {
let deport = {};
deport.value = it.All;
deport.name = it["系名称"];
arr.push(deport);
});
this.lists = arr;
return;
});
},
//打印功能
printTable() {
console.log(this.$refs.content);
html2canvas(this.$refs.content, {
backgroundColor: null,
useCORS: true,
windowHeight: document.body.scrollHeight,
}).then((canvas) => {
// let url = canvas.toDataURL('image/jpeg', 1.0)
const url = canvas.toDataURL();
this.img = url;
printJS({
printable: url,
type: "image",
documentTitle: "新生录取统计表",
});
console.log(url);
});
},
},
created() {
this.getSpanArr(this.tableData);
this.getInfoList();
},
mounted() {},
};
</script>
<style scoped lang="less">
.function {
width: 1300px;
margin: 0 auto;
height: 56px;
text-align: left;
line-height: 56px;
.el-button {
padding: 0;
width: 64px;
height: 32px;
border-radius: 4px;
line-height: 8px;
text-align: center;
margin-left: 20px;
}
}
#printTest {
width: 1300px;
margin: 0 auto;
}
</style>
<style scoped>
.zhuanye {
padding: 5px;
border-bottom: 0.5px solid #d1d0d0;
}
.titleIcon {
display: inline-block;
height: 30px;
width: 3px;
background: #2e8ef4;
margin: -5px 10px;
}
</style>
<style>
.ivu-table-cell-slot .zhuanye:last-child {
border-bottom: none;
}
.ivu-table-cell {
padding: 0px;
text-align: center;
}
.ivu-table-header thead tr th {
text-align: center;
}
tr.ivu-table-row-hover td {
background: none;
}
</style>