前端hiprint打印

官方文档：hiprint.io

首先需要在页面中根据自己的路径引入hiprint，一开始没引入css导致打印时当页面超过1页 布局就会有问题

    <script src="../src/assets/js/hiprint/polyfill.min.js"></script>
    <script src="../src/assets/js/hiprint/hiprint.bundle.js"></script>
    <script src="../src/assets/js/hiprint/plugins/jquery.hiwprint.js"></script>
    <link href="../src/assets/js/hiprint/css/hiprint.css" rel="stylesheet" />
    <link href="../src/assets/js/hiprint/css/print-lock.css" rel="stylesheet" />

js代码

printForm1() {
    //这边是处理数据格式的，不用管
    for (var i = 0; i < this.detailForm.length; i++) {
        this.detailForm[i]["PB_BorrowBy_N"] = (this.detailForm[i]["PB_BorrowBy"] == 0 || this.detailForm[i]["PB_BorrowBy"]==null) ? null : (this.selectList.find(item => item.User_ID == this.detailForm[i]["PB_BorrowBy"]).User_Name);
        this.detailForm[i]["PB_ApprovedBy_N"] = (this.detailForm[i]["PB_ApprovedBy"] == 0 || this.detailForm[i]["PB_ApprovedBy"]==null) ? null:(this.userList.find(item => item.User_ID == this.detailForm[i]["PB_ApprovedBy"]).User_Name);
        this.detailForm[i]["PB_WGID_N"] = (this.detailForm[i]["PB_WGID"] == 0 || this.detailForm[i]["PB_WGID"] == null) ? null:(this.userList.find(item => item.User_ID == this.detailForm[i]["PB_WGID"]).User_Name).toString();
    }
    //这边需要对应模版中的数据，字段名称与field的值对应
    //比如pic对应"field": "pic" { "options": { "left": 67.5, "top": 66, "height": 91.5, "width": 96, "src": "/Content/assets/hi.png", "field": "pic" }, "printElementType": { "type": "image" } }
    const data = {
        amount: this.amount,
        pic: "../FileUpload/" + this.detailForm[0].PB_PicUrl,
        BorrowTime: this.getFormattedDate(this.detailForm[0].PB_BorrowTime.format),
        Number: this.detailForm[0].PB_Number,
        pjname: this.pjname,
        username: this.username,
        UpdatedTime: this.getFormattedTime(this.detailForm[0].PB_UpdatedTime),
        table: this.detailForm
    };
    //这边是创建打印样式模版,具体见官方文档
    let hiprintTemplate = new hiprint.PrintTemplate({
        template: { "panels": [{ "index": 0, "paperType": "A4", "height": 297, "width": 210, "paperHeader": 43.5, "paperFooter": 842, "printElements": [{ "options": { "left": 229.5, "top": 40.5, "height": 9.75, "width": 120, "title": "工人借款单", "testData": "工人借款单", "fontSize": 21, "fontWeight": "bold", "showInPage": "first" }, "printElementType": { "type": "text" } }, { "options": { "left": 67.5, "top": 66, "height": 91.5, "width": 96, "src": "/Content/assets/hi.png", "field": "pic" }, "printElementType": { "type": "image" } }, { "options": { "left": 48, "top": 169.5, "height": 9, "width": 502.5 }, "printElementType": { "type": "hline" } }, { "options": { "left": 50, "top": 211.5, "height": 9.75, "width": 120, "title": "日期", "field": "BorrowTime" }, "printElementType": { "type": "text" } }, { "options": { "left": 200, "top": 213, "height": 9.75, "width": 180, "title": "单据编号", "field": "Number" }, "printElementType": { "type": "text" } }, { "options": { "left": 390, "top": 213, "height": 9.75, "width": 120, "title": "项目工地", "field": "pjname" }, "printElementType": { "type": "text" } }, { "options": { "left": 49.5, "top": 262.5, "height": 36, "width": 490.5, "field": "table", "tableBodyRowHeight": 25, "tableBodyCellBorder": "border", "columns": [[{ "title": "工人姓名", "width": 75, "colspan": 1, "rowspan": 1, "field": "PB_BorrowBy_N" }, { "title": "借款金额", "width": 75, "colspan": 1, "rowspan": 1, "field": "PB_Amount" }, { "title": "批准人", "width": 75, "colspan": 1, "rowspan": 1, "field": "PB_ApprovedBy_N" }, { "title": "借款人签字", "width": 75, "colspan": 1, "rowspan": 1 }, { "title": "组长", "width": 75, "colspan": 1, "rowspan": 1, "field": "PB_WGID_N" }, { "title": "备注", "width": 110, "colspan": 1, "rowspan": 1, "field": "PB_Name", "columnId": "PB_Name" }]] }, "printElementType": { "title": "表格", "type": "tableCustom" } }, { "options": { "left": 80, "top": 331.5, "height": 9.75, "width": 120, "title": "合计", "field": "amount" }, "printElementType": { "type": "text" } }, { "options": { "left": 155, "top": 331.5, "height": 9.75, "width": 120, "title": "制单人", "field": "username" }, "printElementType": { "type": "text" } }, { "options": { "left": 320, "top": 331.5, "height": 9.75, "width": 220, "title": "制单时间", "field": "UpdatedTime" }, "printElementType": { "type": "text" } }, { "options": { "left": 46.5, "top": 355.5, "height": 9, "width": 504 }, "printElementType": { "type": "hline" } }], "paperNumberLeft": 565, "paperNumberTop": 819, "firstPaperFooter": null }] }
    });
    //把数据传给模版打印
    hiprintTemplate.print(data)
},