vue3 uses vue3-print-nb to implement the area printing function

npm install vue3-print-nb

//Introduceimport print from 'vue3-print-nb'
//mountconst app = createApp(App)
(print)

<!-- Print area container -->
<div >
<span>I'm the printed content</span>
&lt;span&gt;exist#printBox container will be printed</span>&lt;/div&gt;
&lt;!-- Button binding print --&gt;
&lt;button v-print="print"&gt;Click to open the print preview&lt;/button&gt;

// Here is the printed configuration itemconst  print=ref({
        id: 'printBox',//The id here is the id of our printing area above, which is to click wherever we refer to        popTitle: 'Configure header title', // Print the title above the configuration page        extraHead: '', // The top head text, additional tags attached to the head tag, split using commas        preview: false, // Whether to start preview mode, default is false        previewTitle: 'Preview title', // Print the preview title        previewPrintBtnLabel: 'The preview ends，Start printing', // Print the text of the button below the preview title, click to enter the print        zIndex: 20002, // The z-index of the preview window is 20002 by default, preferably higher than the default value        previewBeforeOpenCallback() { ('The preview window is loading!  '); }, // The preview window opens before the callback        previewOpenCallback() { ('The preview window has been loaded, and the preview is open!  ') }, // Callback when the preview window opens        beforeOpenCallback() { ('Before printing!  ') }, // Start printing the callback        openCallback() { ('Execute printing!  ') }, // Callback when printing        closeCallback() { ('Close the printing tool!  ') }, // Close the printed callback (cannot distinguish between confirmation or cancellation)        clickMounted() { ('Click the v-print bound button!  ') },
      })

<template>
    <div>
        &lt;button v-print="'#a'">Print</button>        &lt;div &gt;
             // Method 1             // Use div to wrap the blocks that need to be paging using css attribute page-break-after: always for paging            &lt;div style="page-break-after:always"&gt;Page 1&lt;/div&gt;
            &lt;div style="page-break-after:always"&gt;Page 2&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/template&gt;
&lt;style&gt;
     // Method 2     // Use media query Set the height of body and html to auto when printing     @media print {
        @page {
          size:  auto;
        }
        body, html {   //If vue's outermost id is, the default is #app. If height:100%; is set, then #app will also add height: auto !important;        }
      }
&lt;/style&gt;