<template>
  <PageWrapper title="打印场景" content="json 打印表格，图片打印">
    <el-card shadow="never" class="mt-3 proCard">
      <el-space>
        <el-button type="primary" @click="jsonPrint">打印表格</el-button>
        <el-button type="primary" @click="imagePrint">打印图片</el-button>
      </el-space>
    </el-card>
  </PageWrapper>
</template>

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

  function jsonPrint() {
    printJS({
      printable: [
        { name: '汪伟', email: '735869@gmail.com', phone: '186****5653' },
        { name: '雷秀英', email: '235656452@gmail.com', phone: '135****6536' },
        { name: '邹芳', email: '24586526@gmail.com', phone: '159****5869' },
      ],
      properties: ['name', 'email', 'phone'],
      type: 'json',
    });
  }

  function imagePrint() {
    printJS({
      printable: [
        'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
        'https://element-plus.org/images/guide.png',
      ],
      type: 'image',
      header: 'Multiple Images',
      imageStyle: 'width:100%;',
    });
  }
</script>
