js实现分页打印表格和打印图片print-js

最新推荐文章于 2024-06-06 11:23:53 发布

qq_33440740

最新推荐文章于 2024-06-06 11:23:53 发布

阅读量664

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_33440740/article/details/129989883

版权

npm install print-js

<template>
  <div class="h-full">
    <n-card title="打印" class="shadow-sm rounded-16px">
      <n-button type="primary" class="mr-10px" @click="printTable">打印表格</n-button>
      <n-button type="primary" @click="printImage">打印图片</n-button>
    </n-card>
  </div>
</template>

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

//打印表格
function printTable() {
  printJS({
    printable: [
      { name: '张三', phone: '18888888888', remark: '欢迎一起技术交流' },
      { name: '李四', phone: '18888888888', remark: '欢迎一起技术交流' },
      { name: '王二', phone: '18888888888', remark: '欢迎一起技术交流' },
    ],
    properties: ['name', 'phone', 'remark'],
    header: '标题',
    headerStyle: 'text-align: center;font-size:18px',
    type: 'json'
  });
}
// 打印图片
function printImage() {
  printJS({
    printable: [
      'https://i.loli.net/2021/11/24/1J6REWXiHomU2kM.jpg',
      'https://i.loli.net/2021/11/24/1J6REWXiHomU2kM.jpg'
    ],
    type: 'image',
    header: 'Multiple Images',
    imageStyle: 'width:100%;'
  });
}
</script>

<style scoped></style>