print-js 实现打印表格

<template>
  <div class="home">
    <button @click="printJson">打印</button>
  </div>
</template>

<script lang="ts" setup>
import printJS from 'print-js'

const printJson = () => {
  //通过getdata调用后台接口获取数据封装到res
  // const res = await getdata();
  // this.list = res.data || [];
  let data = []
  for (let i = 0; i < 100; i++) {
    data.push({
      name: `test1${i}`,
      sex: i % 2 == 0 ? '男' : '女',
      age: i * 2,
      hobby: i % 2 == 0 ? '篮球' : '麻将',
      isMarried: i % 2 == 0 ? '未婚' : '已婚'

    })
  }
  printJS({
    printable: data,
    properties: [
      {
        field: 'name',
        displayName: '姓名',
        columnSize: 1
      },
      {
        field: 'sex',
        displayName: '性别',
        columnSize: 1
      },
      {
        field: 'age',
        displayName: '年龄',
        columnSize: 1
      },
      {
        field: 'hobby',
        displayName: '爱好',
        columnSize: 1
      },
      {
        field: 'isMarried',
        displayName: '婚姻状况',
        columnSize: 1
      },
    ],
    type: 'json',
    header: '标题',
    // 样式设置
    gridStyle: 'border: 2px solid #000;',
    gridHeaderStyle: 'color: #000;  border: 2px solid #000;'
  })
}

</script>