【hiprint】hiprint的使用方法（附使用案例）hiprint 表格数据传输问题解决办法

事件起因：

因为前两天要弄一个a4纸的打印功能（嵌入在网页里面），结果前两天因为弄这个搞得挺恼火的，到笔者终于解决了这个问题后，特此来说明一下这个问题，以便后来者能够吸取经验教训

问题描述：

我所创建的一个空的vue项目，后面在这个里面加入hiprint进行数据的打印
整个项目的结构：

我因为写的一个简单的数据表无法进行table表的数据绑定导致我花费了过多的时间进行查找问题，在网上查找的过程中也没有找到有效的案例
所以我提供了一个案例来展示给大家下载，方便大家进行对应的操作（在下面的案例板块）

如下图所示无法将对应的绑定的数据在打印单中进行显示

hiprint使用教学：

首先去到它的官网：hiprint的官网：http://hiprint.io/demo
官网这个样子：

将模板清空，自定义设计模板

将对应的模块拖入编辑界面，需要注意字段的绑定,每一个组件都要绑定对应的字段名

注意表格单列的绑定

编辑好后它会自己隐藏对应列的绑定字段名称:

将设计好的模板转换为对应的json串，以便复制到项目中的代码中去

hiprint案例(附下载地址)：

样例项目 https://download.youkuaiyun.com/download/chirp_CQ/62427678
hiprint需要的css和js依赖:
https://download.youkuaiyun.com/download/chirp_CQ/62429133

这下面是笔者自己写的一个模板然后将它导入到了一个全新的vue项目中（使用的是npm ui刚创建的vue项目，属于一个全新的vue项目），注意要发挥它的功能就需要相应的依赖包导入，建议自己学习导一下这些东西，在上面的样例项目下载中是已经导入好了相应的hiprint的css和js的，但建议大家自己导入一下

hiprint的依赖导入

具体导入过程如下：
首先：一个全新的vue项目的目录结构大致是这样的：

将上面的hiprint的css和js下载下来，然后将整个文件夹放在上面这个目录下的public目录下
像这样：

然后打开public目录下的index.html 将hiprint里面的css和js导入进来：

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

到这儿就已经完成了一大半了
然后就是在app.vue中编写内容（这只是为了方便不怎么会vue的同学，以及会了的，可以去自己创建单独的vue文件，然后设置路由自己去实现跳转）

在上面的样例的 app.vue中的内容（能够将绑定的数据在打印单中进行显示）：

<template>
  <div id="app"><