vue-print-nb adds a blank page when printing preview

Requirement: When using vue-print-nb to print preview, one page of content will be printed in preview and one page will be displayed during printing. However, the problem currently encountered is that two pages are displayed, and the second page is a blank page.

Solution: First, I analyzed the html layout of the printed page. There is nothing wrong with it, but it just prints an extra blank page, which is very annoying. ok, don’t worry about it yet, www.baidu.com is a magical website. Search it. But I saw a lot of people saying that it was because the margin was not set to 0, and other internal and external margins were set incorrectly, etc. I tried it roughly and found that there was no change.

Later I discovered the cause of the problem: printing should have an exclusive style.

Code display:

1. html part

 2、style

 2.1. Paste directly

<style @media="print">
  @page {
    size: auto;
    margin: 3mm;
}

html {
    background-color: #ffffff;
    height: auto;
    margin: 0px;
}

 Summarize:

        The reason may be that the printing style is not set, resulting in one extra blank page being printed. Hope it can help colleagues in need. If you have any questions, please feel free to ask them to avoid misleading others, thank you!

        I hope the code you write will never have bugs! ! !