Vue打印【vue-print-nb】

• 原生打印 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>