JS 打印 data数据_Vue+Element UI打印数据库内全部数据

导出效果：

将数据库的数据以表格的形式全部打印出来，需要调用后台的接口在数据库中查找需要的数据进行打印。

1.安装

npm 

或

yarn add print-js --save

2.引入

// 在当前的vue文件中引入
import printJS from "print-js";

3.使用

template

 <el-button @click="printJson">打印全部表格</el-button>

script-->methods

methods: {
 printJson() {
 this.$http.get("/list").then((res) => {
 console.log(res);
 this.list = res.data.list || [];

 for (let v of this.list) {
 this.data.push({
 field1: v.id,
 field2: v.name,
 field3: v.data,
 field4: v.shop,
                    });
                }
 printJS({
 printable: this.data,
 properties: [{
 field: "field1",
 displayName: "ID",
 columnSize: 1,
                        },
                        {
 field: "field2",
 displayName: "姓名",
 columnSize: 1,
                        },
                        {
 field: "field3",
 displayName: "日期",
 columnSize: 1,
                        },
                        {
 field: "field4",
 displayName: "字段",
 columnSize: 1,
                        },
                    ],
 type: "json",
 header: "人员名单",
 // 样式设置
 gridstyle: "border:2px solid #3971A5",
 gridHeaderStyle: "color:red ;border:2px solid #3971A5",
                });
            });
        },
    },