div 元素的 Svelte 打印內容

Question

嗨，我正在為我正在做的一個副項目使用 svelte，我想打印一張收據而不是整個頁面。 有辦法嗎？ 我看到其他一些帖子談論如何使用普通 JavaScript 打印 div 元素，但這在 svelte 中不起作用。

示例代碼我只想打印具有 class 可打印元素

<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

pour imprimer uniqueness ton iv tu vas devoir te servir du DOM et d'une fonction javascript que tu vas créer。 ##########最終代碼#########

function printMyDiv(e)
{
    var divEltToPrint = document.querySelector(".classNameOfDiv");
    var contentOfDivEltToPrint = divEltToPrint.innerHTML;
    var myWindow = window.open('', '', 'height=900px, width=600px');
    myWindow.document.write("<html><head><title>printElement</title></head><body>");
    myWindow.document.write(contentOfDivEltToPrint);
    myWindow.document.write("</body></html>");
    myWindow.print();
    myWindow.close();
}
document.querySelector(".btnPrint").addEventListener("click",printMyDiv);

Après avoir créer une fonction javascript，y ajouter les éléments en suivant les étapes：

1- tu crées une variable pour récupérer ton div a imprimer

var divEltToPrint = document.querySelector(".classNameOfDiv");

2- tu recupères le contenue html de ton div

var contentOfDivEltToPrint = divEltToPrint.innerHTML;

3- tu crées une nouvelle f.netre (c'est cette fenêtre qui sera imprimer) que tu affectes à une variable pour pouvoir la manipuler。

var myWindow = window.open('', '', 'height=900px, width=600px');

4-tu ajoutes les éléments du DOM à ta nouvelle fenêtre；

myWindow.document.write("<html><head><title>printElement</title></head><body>");

5- 繼續維護 DOM 的基礎和結構：

myWindow.document.write(contentOfDivEltToPrint);
myWindow.document.write("</body></html>");

6- tu lances l'impression de ta fenêtre et en suite tu la fermes

myWindow.print();
myWindow.close();

7- tu rajoutes cette fonction a ton bouton d'impression et c'est bon:!! :)

div 元素的 Svelte 打印內容

問題描述

1 個解決方案

解決方案1
0 2022-07-20 14:13:11

解決方案2
-1 2023-01-11 23:45:11

div 元素的 Svelte 打印內容

問題描述

1 個解決方案

解決方案1 0 2022-07-20 14:13:11

解決方案2 -1 2023-01-11 23:45:11

解決方案1
0 2022-07-20 14:13:11

解決方案2
-1 2023-01-11 23:45:11