如何在Svelte项目中仅打印指定div内容而非整页？

方法一：使用CSS媒体查询（推荐） #

这种方法无需复杂JS逻辑，直接利用浏览器的打印媒体查询，在打印时自动隐藏非目标元素，是最简单高效的方案。

在你的Svelte组件中添加如下代码：

<style>
  /* 打印时的专用样式 */
  @media print {
    /* 隐藏所有非.printable及其子元素的内容 */
    body *:not(.printable):not(.printable *) {
      display: none !important;
    }
    /* 确保目标元素全屏显示，避免排版问题 */
    .printable {
      display: block !important;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
    }
  }
</style>

<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>

<!-- 触发打印的按钮 -->
<button on:click={() => window.print()}>打印收据</button>

点击按钮后，浏览器会弹出打印预览，此时只有.printable类的元素会被显示并打印。

方法二：通过JS创建独立打印窗口 #

如果需要更灵活的控制（比如打印样式与原页面差异大，或不想影响原页面状态），可以将目标元素内容复制到新窗口后打印，这种方法在Svelte中也能正常工作。

优化版（使用Svelte的bind:this获取元素）

<script>
  // 用bind:this绑定目标元素，比querySelector更可靠
  let printableElement;

  function printReceipt() {
    if (!printableElement) return;

    // 创建新的空白窗口
    const printWindow = window.open('', '_blank', 'width=800,height=600');
    // 写入打印所需的HTML和样式
    printWindow.document.write(`
      <html>
        <head>
          <title>收据打印</title>
          <style>
            /* 自定义打印样式 */
            body {
              font-family: 'Arial', sans-serif;
              max-width: 800px;
              margin: 0 auto;
              padding: 30px;
            }
            h1 {
              color: #2d3748;
              border-bottom: 1px solid #e2e8f0;
              padding-bottom: 10px;
            }
          </style>
        </head>
        <body>${printableElement.innerHTML}</body>
      </html>
    `);
    printWindow.document.close();

    // 等待内容加载完成后执行打印并关闭窗口
    printWindow.onload = () => {
      printWindow.print();
      printWindow.close();
    };
  }
</script>

<div class="printable" bind:this={printableElement}>
    <h1>hello world</h1>
</div>

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

<button on:click={printReceipt}>打印收据</button>

这种方法会打开一个新窗口，仅显示需要打印的内容，打印完成后自动关闭窗口，不会干扰原页面的正常交互。

内容的提问来源于stack exchange，提问作者Omar Alhussani