vue3 antd 前端打印功能实现

在Vue3中集成Ant Design（简称antd）并实现打印功能，通常需要借助一些库如vue-print-nb或者axios配合print.js来完成。以下是基本步骤：

1. **安装依赖**:
- 首先确保已安装Vue CLI，并创建一个新的项目。然后通过`npm install`或`yarn add`安装`@ant-design-vue/components`（antd的Vue组件库）和必要的打印库，比如`vue-print-nb`和`print-js`。

npm install @ant-design-vue/components print-js vue-print-nb
# 或者
yarn add @ant-design-vue/components print-js vue-print-nb

2. **引入组件**:
在你的Vue组件中，导入需要的打印相关的组件，例如`@ant-design-vue/button`用于生成打印按钮，`vue-print-nb`的打印组件等。

import { Button } from '@ant-design-vue/components';
import Print from 'vue-print-nb';

3. **添加打印功能**:
在模板中，你可以创建一个按钮，当点击时触发打印。这里使用`vue-print-nb`的`print`函数，可以设置打印选项，如页面范围、缩放比例等。

<template>
  <div>
    <Button type="primary" @click="handlePrint">打印</Button>
    <Print :url="printUrl" :options="{type: 'html', page: 'auto'}"></Print>
  </div>
</template>

<script>
export default {
  data() {
    return {
      printUrl: '', // 这里可以根据需要动态设置URL
    };
  },
  methods: {
    handlePrint() {
      this.printUrl = '当前视图的HTML'; // 如果你想打印当前页面，可以用window.document.body.innerHTML;
      // 使用print-js实例化并调用打印
      new PrintJS({
        printable: this.printUrl,
        type: 'html', // 可选值有'text'、'image'、'html'
        landscape: false, // 是否横版打印
      }).print();
    },
  },
};
</script>

4. **注意点**:
- `printUrl`可以是当前页面的HTML内容，也可以是一个API接口地址，返回的数据需经过处理再作为打印内容。
- 考虑到性能和安全性，不建议直接将整个页面HTML传递给用户进行打印，而是提供需要的内容。