vue模板打印_质保卡打印vue模板设置

Vue是一套构建用户界面的渐进式框架。
它实现了数据双向的绑定。利用这个特性，可以比较容易将模板与数据分离。在应对不同的不同的打印需求时，我们只需要提供足够丰富的数据，不同模板按照需求获取相应的字段即可。

创建容器
打印之前，需要把页面呈现在页面上。所以先创建一个隐藏的DOM节点，作为打印内容的容器。

class="hidden" 在bootstrap框架中相当于style="display: none"

获取模板
根据需求选择对应的模板，向服务端发送ajax请求，获取空模板。 获取到空模版之后，利用Vue双向绑定的特性，向模板填充数据。然后将填充好的模板，填充上边创建的容器中。

$.getJSON(‘ins_common.do?action=get_print_template’, {mbdm: ‘0003’}, function (res) {

    if (res.code === 'T') {
        var $print = $('#id_print');
        $print.html(res.message);
        //创建Vue对象与打印容器绑定
        new Vue({
            el: '#id_print',
            data: {
                LRXM:'李四',
                CH:'12'
            }

        });
    } else {
        wnform.toast(res.message);
    }

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

模板是静态的html