使用hiprint实现打印html页面或后台数据

一、在html中使用

需要先下载官网的文件，引入以后才能使用

链接如下：http://hiprint.io/Content/download/hiprint.zip，将其复制到网址上就可以下载了


<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>hinnn-hiprint</title>
<!-- hiprint -->
<link href="hiprint/css/hiprint.css" rel="stylesheet">
<link href="hiprint/css/print-lock.css" rel="stylesheet">
<link href="hiprint/css/print-lock.css" media="print" rel="stylesheet">

<!-- jQuery (hiprint 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- polyfill.min.js解决浏览器兼容性问题v6.26.0-->
<script src="hiprint/polyfill.min.js"></script>
<!-- hiprint 核心js-->
<script src="hiprint/hiprint.bundle.js"></script>
<!-- 条形码生成组件-->
<script src="hiprint/plugins/JsBarcode.all.min.js"></script>
<!-- 二维码生成组件-->
<script src="hiprint/plugins/qrcode.js"></script>
<!-- 调用浏览器打印窗口helper类，可自行替换-->
<script src="hiprint/plugins/jquery.hiwprint.js"></script>
</head>
<body>
<h1 >在Html中使用hiprint打印</h1>
<button onclick="print()">打印</button>
<div id="templateDesignDiv" >
</div>

<script>
   
    let printData = {
        name: "黄磊",
       table: [
        { id: "1", name: "王小可", gender: "男", count: "120", amount: "9089元" },
        { id: "2", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
        { id: "3", name: "梦之遥", gender: "女", count: "720", amount: "29089元" },
        { id: "4", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "5", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "6", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "7", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "8", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "9", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "10", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "11", name: "王小可", gender: "男", count: "120", amount: "9089元" },
        { id: "12", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
        { id: "13", name: "梦之遥", gender: "女", count: "720", amount: "29089元" },
        { id: "14", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "15", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "16", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "17", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "18", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "19", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "20", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "21", name: "王小可", gender: "男", count: "120", amount: "9089元" },
        { id: "22", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
        { id: "23", name: "梦之遥", gender: "女", count: "720", amount: "29089元" },
        { id: "24", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "25", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "26", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "27", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "28", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "29", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "21", name: "王小可", gender: "男", count: "120", amount: "9089元" },
        { id: "22", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
        { id: "23", name: "梦之遥", gender: "女", count: "720", amount: "29089元" },
        { id: "24", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "25", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "26", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "27", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "28", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "29", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "21", name: "王小可", gender: "男", count: "120", amount: "9089元" },
        { id: "22", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
        { id: "23", name: "梦之遥", gender: "女", count: "720", amount: "29089元" },
        { id: "29", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        { id: "30", name: "黄小菊", gender: "女", count: "420", amount: "19089元" },
        ],
    };
    function print() {
        hiprint.init();
        var hiprintTemplate ;
        hiprintTemplate = new hiprint.PrintTemplate({
            template: {
                "panels":[{
                            "index":0,"height":297,"width":210,"paperHeader":45,"paperFooter":780,
                            "printElements":[
                                {
                                    "options":{"left":165,"top":10.5,"height":21,"width":225,"title":"这是表格模板","fontSize":16,",fontWeight":"700","textAlign":"center","lineHeight":16},
                                    "printElementType":{"title":"文本","type":"text"}},
                                {
                                    "options":{"left":16.5,"top":57,"height":38,"width":562.5,"textAlign":"center",
                                    "columns":[
                                        {"columns":[
                                            {"title":"姓名","field":"name","width":99.87127733295982,"colspan":1,"rowspan":1},
                                            {"title":"性别","field":"gender","width":95.65764630289445,"colspan":1,"rowspan":1},
                                            {"title":"分数","field":"count","width":104.71872050066564,"colspan":1,"rowspan":1},
                                            // {"width":101.99066954092144,"colspan":1,"rowspan":1},
                                            // {"width":81.6409089895988,"colspan":1,"rowspan":1},
                                            // {"width":89.12077733295979,"colspan":1,"rowspan":1}
                                        ]}]
                                    },
                                    "printElementType":{"title":"表格","type":"tableCustom","field":"table"}
                                },{
                                    "options":{"left":28.5,"top":795,"height":9.75,"width":120,"title":"这是页尾内容"},
                                    "printElementType":{"title":"文本","type":"text"}
                                }],"paperNumberLeft":565.5,"paperNumberTop":819
                        }]
            }, // 模板json(object)
            
        });
        hiprintTemplate.design('#templateDesignDiv', { grid: true });
        // <!-- 打印预览 -->
        hiprintTemplate.print(printData);
        // 打印完成清除面板
        $("#templateDesignDiv").empty()
    }
</script>
</body>
</html>

二、在vue中使用

我写了两种打印，一种是根据数据渲染打印表格一种是打印现有的html页面表格。

<template>
  <div >
    <button @click="print1()">打印获取数据</button>
    <button @click="print2()">打印html页面</button>
    <div id="hiprint-printTemplate"></div>
    <div id="hiprint-printTemplate2">

    </div>
    <div style="display:block;height: auto;" ref="tablehtml" id="tablehtml">
      <table class="hiprint-printElement-tableTarget" style="border-collapse: collapse;width:100%;">
            <thead>
                <tr>
                    <td id="3" haswidth="haswidth" style="width: 80.0412pt;">姓名</td>
                    <td id="4" haswidth="haswidth" style="width: 80.9048pt;">性别</td>
                    <td id="5" haswidth="haswidth" style="width: 180.8pt;">爱好</td>
                    <td id="6" haswidth="haswidth" style="width: 1.122pt;"></td>
                    <td id="7" haswidth="haswidth" style="width: 1.1449pt;"></td>
                    <td id="8" haswidth="haswidth" style="width: 1.4877pt;"></td>
                </tr>
            </thead>
            <tbody>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
                <tr><td field="name">hiprint1</td><td field="gender">男</td><td field="like">喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好</td><td></td><td></td><td></td></tr>
            </tbody>
            <tfoot><tr><td colspan="6">表脚</td></tr></tfoot>
        </table>
    </div>
    
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { hiprint } from "vue-plugin-hiprint";
let hiprintTemplate;
let hiprintTemplate2;
onMounted(() => {
 
})
let printData = {
    name: "黄磊",
    logoTest: "https://portrait.gitee.com/uploads/avatars/user/1800/5400665_CcSimple_1591166830.png!avatar60",
    password: "12346",
    longText:
    "浙江在线3月29日讯最近，\n一篇小学五年级学生写的作文引起了钱报记者的关注这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文《脏话风波》浙江在线3月29日讯最近，一篇小学五年级学生写的作文引起了钱报记者的关注。这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文《脏话风波》浙江在线3月29日讯最近，一篇小学五年级学生写的作文引起了钱报记者的关注。这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文《脏话风波》浙江在线3月29日讯最近，一篇小学五年级学生写的作文引起了钱报记者的关注。这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文《脏话风波》浙江在线3月29日讯最近，一篇小学五年级学生写的作文引起了钱报记者的关注。这篇作文的题目叫做《脏话风波》，讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文讲述的是小作者班级里发生的一种不文明现象——讲脏话的同学越来越多，有的人说话甚至句句“带把儿”。班主任为了遏制这种现象，煞费苦心想了很多办法，跟学生斗智斗勇……看到这篇作文，记者突然想到，自己读六年级的儿子有天突然冒出一句脏话。此前，他是从不说脏话的。问他怎么学会的，他也说不出个所以然来。于是，记者做了这个小学生脏话现象调查。经过了解才发现，小学生爱说脏话竟然较为普遍，一般三年级会冒出苗头。无论是学习成绩好的，还是平时不太起眼的，都会说脏话。而且，说脏话会“传染”，一旦冒头不制止，到了五六年级甚至可能在班里大爆发。以下为作文",
    table: [
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' },
      { name: 'hiprint', like: '喜爱唱歌跳舞，乒乓球，篮球，足球，等各种爱好', gender: '男' }
    ],
};
const print1 =()=>{
  
  hiprintTemplate = new hiprint.PrintTemplate();
  var panel1 = hiprintTemplate.addPrintPanel({ width: 210, height: 297, paperHeader: 45, paperFooter: 780,paperType:'A4' });
  panel1.addPrintTable({
    options: {
        "left": 16.5,
        "top": 57,
        "height": 38,
        "width": 562.5,
        "textAlign": "center",
        "field": "table",
        "columns": [[{
            "title": "姓名",
            "field": "name",
            "width": 40,
            "colspan": 1,
            "rowspan": 1
            }, {
            "title": "性别",
            "field": "gender",
            "width": 40,
            "colspan": 1,
            "rowspan": 1
            }, {
            "title": "爱好",
            "field": "like",
            "width": 90,
            "colspan": 1,
            "rowspan": 1
            }, {
            "width": 40,
            "colspan": 1,
            "rowspan": 1
            },]]
        }
  });
  hiprintTemplate.design('#hiprint-printTemplate');
  hiprintTemplate.print(printData);
  $("#hiprint-printTemplate").empty(); //打印完以后清空
}

const print2=()=>{
  hiprintTemplate2 = new hiprint.PrintTemplate();
  // 获取表格元素高度设置面板高度
  let height=Math.ceil($('#tablehtml').height()*25.4/96/290)*290
  // 因为打印内容高度是a4纸的高度，当面板高度超过a4纸高度时就会分页
  var panel3 = hiprintTemplate2.addPrintPanel({ width: 210, height:height , paperHeader: 45, paperFooter: 780,paperType:'A4' });
  panel3.addPrintHtml({ options: { "left": 16.5,"top": 57,"height": 38,"width": 562.5,"textAlign": "center","content": $('#tablehtml').html() } });
  hiprintTemplate2.design('#hiprint-printTemplate2');
  hiprintTemplate2.print();
  $("#hiprint-printTemplate2").empty(); //打印完以后清空
}
</script>
<style scoped >
</style>

使用hiprint实现打印html页面或后台数据

一、在html中使用

二、在vue中使用

悦读