Vue3中使用vue3-print-nb实现打印功能

npm install vue3-print-nb

yarn add vue3-print-nb

import { defineComponent } from 'vue';
import Vue3PrintNb from 'vue3-print-nb';

export default defineComponent({
  name: 'MyComponent',
  components: {
    Vue3PrintNb
  }
});

<template>
  <div>
    <button @click="printContent">打印内容</button>
    <div id="print-section">
      <h1>这是要打印的内容</h1>
      <p>在这里放置你希望打印的内容。</p>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { usePrint } from 'vue3-print-nb';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const { print } = usePrint();
    
    const printContent = () => {
      print('#print-section');  // 指定需要打印的元素的 id
    };

    return {
      printContent
    };
  }
});
</script>

const { print } = usePrint({
  printStyle: `
    body {
      font-family: Arial, sans-serif;
    }
    #print-section {
      border: 1px solid #ccc;
      padding: 10px;
    }
  `
});

const { print } = usePrint({
  afterPrint: () => {
    console.log('打印完成！');
  }
});

<style scope>
@media print {
  @page {
    size: auto;
    margin: 0;
  }
  #printArea {
    width: 1165px;
    margin: 0 auto;
    overflow-y: scroll;
    /* 显示背景图片 */
    -webkit-print-color-adjust: exact;
  }}
</style>