使用截图

使用文档

1. 导入文件

首先，您需要将该打印操作插件安装到您的项目中。该插件使用了 Vue.js，因此您需要确保您的项目中已经引入了 Vue.js。

import MyPlugin from 'path/to/my-plugin'

Vue.use(MyPlugin)

2. 调用格式

在安装了插件之后，您可以在 Vue 实例中使用 $PrintCustom 方法进行打印操作。

this.$PrintCustom(dom, options);

参数说明：

dom：要打印的 DOM 元素或选择器。可以是一个 DOM 元素对象或一个字符串选择器（类似于 CSS 选择器）。
options（可选）：配置选项对象，用于自定义打印操作的行为。

3. 配置选项示例

在插件中，您可以使用配置选项对象 options 来自定义打印操作的行为。以下是一些示例配置选项：

const options = {
  noPrint: '.no-print',
  fontSize: '12px',
  title: 'Print Document',
  pageStyle: `
    @media print {
      body {
        background-color: #fff;
      }
      .header {
        display: none;
      }
      .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }
  `,
  onBeforePrint: () => {
    console.log('Before printing...');
  },
  onAfterPrint: () => {
    console.log('After printing...');
  }
};

this.$PrintCustom(dom, options);

在上述示例中，添加了以下更多的配置选项：

配置选项	说明	默认值
noPrint	用于指定不需要打印的元素的 CSS 选择器。	'.no-print'
fontSize	用于指定打印内容的字体大小。可以是一个有效的 CSS 字体大小值。	'12px'
title	用于指定打印页面的标题。	无
pageStyle	用于自定义打印时的页面样式。您可以在其中使用 CSS 媒体查询和选择器来定义打印时的样式。	无
onBeforePrint	一个回调函数，在打印之前执行。您可以在此函数中执行一些自定义操作，例如显示打印预览窗口之前的提示。	无
onAfterPrint	一个回调函数，在打印完成后执行。您可以在此函数中执行一些自定义操作，例如显示打印完成后的消息。	无