精简打印 div 元素的内容

Question

嗨，我正在使用 svelte 进行我正在做的一个业余项目，我想打印收据而不是整个页面。有办法做到吗？我看到其他一些帖子讨论如何使用纯 JavaScript 打印 div 元素，但这在 svelte 中不起作用。

示例代码我只想打印带有 printable 类的元素

<div class="printable">
    <h1>hello world</h1>
</div>

<div class="navbar">
    <a href="/">home</a>
    <a href="/next">next</a>
    <a href="/profile">profile</a>
</div>

Answer 1

您可以使用

@media

查询或使用事件 (

beforeprint

/

afterprint

) 和本地状态来显示/隐藏内容。

在定位元素方面，如果在打印时反转逻辑并标记要删除的元素，会更容易。隐藏所有没有该类的元素很容易，但默认情况下会在可打印元素内包含

h1

。

例如：

<div>
    <h1>hello world</h1>
</div>

<div class="navbar not-printable">
    <a href="/">home</a>
    <a href="/next">next</a>
    <a href="/profile">profile</a>
</div>

<style>
    @media print {
        .not-printable { display: none; }
    }
</style>

（如果元素分布在多个文件中，由于组件样式范围的原因，您可能希望将其移动到全局样式表。）

Answer 2

我将把这个留给那些经历过如何在不需要任何库或额外的 js 方法的情况下获得完美解决方案的兔子洞的人。

首先在 svelte 文件的底部添加这些样式：

<style lang='css'>
  @media print {
    @page {
         size: auto;   /* auto is the initial value */
         margin: 0;  /* this affects the margin in the printer settings */
     }
   :global(body) {
     visibility: hidden; /* this will hide any elements in your layout elements */
   }
   #my-div {
     visibility: visible;
     position: absolute;
     left: 0;
     top: 0;
   }
 }
</style>

对于要打印的 div，只需添加一个名称为

my-div

:

的标识符标签

<div id="my-div">
 <!-- Your content goes here -->
</div>

您可以使用 CRTL+P 来打印或添加带有事件处理程序的按钮元素来调用打印方法。

<button on:click={() => window.print()}>
  Print Me
</button>