JavaScript/html2pdf: Wieso werden die Seiten nicht richtig gedruckt?

Hi, ich möchte mit JavaScript und den Bibliotheken JsBarcode und html2pdf Barcodes generieren, einen Text oberhalb des Barcodes ausgeben und diesen dann als PDF speichern, um damit Etiketten mit Barcodes zu drucken.

Leider habe ich dabei aber das Problem, dass meine Seiten immer weiter nach oben geschoben werden und somit dann ein Label auf zwei Seiten gedruckt wird.

Kennt jemand das Problem oder kann mir dabei helfen?

Bild zum Beitrag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html2pdf</title>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <style>
      .label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 60mm;
        height: 30mm;
        margin: 0;
        padding: 0;
      }

      .label-text-center {
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
      }

      svg {
        width: auto;
        height: 60%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper" id="element-to-print">
      <div class="label">
        <p class="label-text-center">headline01</p>
        <p class="label-text-center">headline01</p>
        <svg id="barcode" class="label-image-center"></svg>
      </div>
    </div>
    <script>
      // Generiere Barcodes für alle SVGs mit der Klasse "barcode"
      JsBarcode("#barcode", "5901234123457", { format: "EAN13" });

      // PDF-Optionen
      var opt = {
        margin: 0,
        filename: 'barcodes.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: [60, 30], orientation:'landscape' }
      };
      // Erstelle das PDF und speichere es
      html2pdf().set(opt).from(document.getElementById('element-to-print')).save();
    </script>
  </body>
</html>

24.10.2024, 21:22

Ich scheine das Problem mitlerweile gefunden zu haben und zwar lag es daran das ich im CSS definiert habe das der div ".label" eine Größe von 60x30mm hat und das scheint in html2pdf Probleme zu haben, nachdem ich die größen Angabe entfernt habe, generiert er das PDF ohne Probleme.

Mitlerweile sieht mein Code wie folgt aus:

.label-page {
   width: 60mm !important;
   height: 30mm !important;
   border:1px solid green;
}
        
.html2pdf__container .label-page {
/*Klasse die in html2pdf beim PDF generieren hinzugefuegt wird*/
   width: auto !important;
   height: auto !important;
   border:none;
}

2 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

08.10.2024, 02:55

Die html2pdf-Bibliothek hat eigene Optionen, mit denen Seitenumbrüche spezifiziert werden können. So könntest du beispielsweise vorgeben, dass nur vor jedem .label-Container (mit Ausnahme des ersten) ein Seitenumbruch eingefügt werden soll und ansonsten nirgendwo.

const options = {
  pagebreak: {
    before: ".label ~ .label",
    mode: "avoid-all"
  },
  /* your other options ... */
};
const elementToPrint = document.getElementById("element-to-print");
html2pdf().set(options).from(elementToPrint).save();

Lies mehr dazu in der Dokumentation.

LeBonyt

07.10.2024, 23:31

Welchen Sinn hat denn die 2 fache Darstellung von Absatz der Klasse label-text-center? Wenn Du einen Absatz weglässt müsste das doch passen.

Woher ich das weiß:Berufserfahrung – Web Developer bei einem mittelständischen Portalbetreiber

CoSci

Beitragsersteller

08.10.2024, 08:38

Der sinn ist das ich gerne einmal Artikelname, Artikelnummer und dann die Ean mit Barcode ausgeben will

Ähnliche Beiträge

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zum Beitrag

Wieso funktioniert dieser CSS-Ladebalken nicht?

Folgendes Problem: Ich hab hier eine Seite, die normalerweise einen Ladebalken generieren sollte. In der Style.css ist es wie folgt definiert:

.loader {

position: relative;

}

.loader::before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border-radius: 100%;

border-top: 5px solid red;

border-left: 3px solid brown;

border-bottom: 1px solid purple;

border-right: transparent;

animation: spinner 0.8s linear infinite;

}

@keyframes spinner {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

In der Page selbst hab ich dann: <div class="loader">Ladebalken</div>

Die Loaderclass oben ist nur ein Beispiel. Ich hab es auch schon mit anderen Einstellungen probiert.

Nach allem was ich so finde und bisher verstanden habe müsste auf der Webseite eigentlich an der entsprechenden Position ein animierter Ladebalken angezeigt werden, wird es aber nicht, sondern egal was ich in der style.css definiere es erscheint das Wort "Ladebalken" auf weißem Grund. Die Style.css ist korrekt verlinkt, alle anderen Elemente wie z.b Buttons werden korrekt angezeigt.

Wo liegt das Problem bzw. woran könnte das liegen?

...zum Beitrag

Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zum Beitrag

HTML CSS bild verschieben funktioniert nicht?

Hey,
Ich möchte gerne das eine Bild nach links oben verschieben, nur weiß ich nicht wie. Hab auch schon padding, margin und align-item versucht nix hat funktioniert-_-.

schonmal danke im vorraus
Liebe Grüße
Lucas

...zum Beitrag

Customtkinter?

Ist es normal dass das erstellen von Labels, Textfelder oder Buttons in Klassen als Vorlage super viel Schreibarbeit ist oder geht das auch eleganter und sauberer?

main:

maclass Main(ctk.CTk):
    def __init__(self):
        super().__init__()
        self.main_window()
        self.chatbot_output = InputBox(self, 1, 1, 10, 10, "s", 500, 500, "#202222", "red", "white", "Gib einen Text ein...")
        self.chatbot_output.grid(row=1, column=1, pady=10, padx=10, sticky="s")
        self.chatbot_input = InputBox(self, 2, 1, 0, 10, "n", 500, 50, "#202222", "red", "white", "Gib einen Text ein...")
        self.chatbot_input.grid(row=2, column=1, pady=0, padx=10, sticky="n")
        self.placeholder = Label(self, 0, 1, 0, 10, "n", 500, 320, "transparent", "transparent", "white", ".")
        self.placeholder.grid(row=0, column=1, pady=0, padx=10, sticky="n")
    def main_window(self):
        height = 920
        width = 1680
        x = (self.winfo_screenwidth()//2)-(width//2)
        y = (self.winfo_screenheight()//2) - (height//2)
        self.geometry(f"{width}x{height}+{x}+{y}")
        self.title("YourTerminal")
        self.grid_columnconfigure(0, weight=0)
        self.grid_rowconfigure(0, weight=0)



if __name__ == "__main__":
    main = Main()
    main.mainloop()
    sys.exit()

Vorlage in einer Klasse und in einer anderen Datei:

class InputBox(ctk.CTkFrame):
    def __init__(self, master, row, column, pady, padx, sticky, width, height, entry_fg_color,frame_fg_color, textcolor, placeholder, *args, **kwargs):
        super().__init__(master, fg_color=frame_fg_color, *args, **kwargs)
        self.set_setup(row, column, pady, padx, sticky, width, height, entry_fg_color, textcolor, placeholder)

    def set_setup(self, row, column, pady, padx, sticky, width, height, entry_fg_color, textcolor, placeholder):
        self.input = ctk.CTkEntry(self,
                                  width=width,
                                  height=height,
                                  fg_color=entry_fg_color,
                                  text_color=textcolor,
                                  placeholder_text=placeholder,
                                  )
        self.input.grid(row=row, column=column, pady=pady, padx=padx, sticky=sticky)

...zum Beitrag

Windows Mail zeigt Text nicht korrekt an?

Hallo,

seit einigen Tagen zeigt Windows (10) Mail den Text verschiedener Mails nicht korrekt an.

Es werden Steuerzeichen dieser Art angezeigt:

@media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {

.w320, *[class].w320 {width:320px !important; }

.w290, *[class].w290 {width:290px !important;}

.w17, *[class].w17 {width:17px !important;}

.h400, *[class].h400 {height:400px !important;}

Kennt jemand einen Tipp, wie man Abhilfe schafft? Auf dem Smartphone in der Samsung Mailing App wird der Text korrekt angezeigt.

LG und alles Gute

...zum Beitrag

Wieso wird eine Zahl nicht innerhalb von einem JLabel ausgegeben?

Hallo,

ich arbeite gerade an einem Sudoku-Projekt. Ich habe das zweidimensionale Array ([9][9]) sudoku bereits berechnet und möchte nun dieses Array in einem JFrame ausgeben.

Doch komischerweise wird die letzte Zahl von dem Array nicht wie vorgesehen in einem JLabel mit einem schwarzen Rand ausgegeben, sondern die Zahl ist ganz woanders und hat keinen Rand. Woran liegt das?

public class SudokuLösung extends JFrame {
  public static void main(String args[]) {
    Frame frame = new JFrame("Sudoku");
    frame.setSize(900, 900);

    int width = 40;
    int height = width;

    JPanel p = new JPanel(new GridLayout(9, 9));
    JLabel[] label = new JLabel[81];

    for (int y = 0; y < 9; y++) {
      for (int x = 0; x < sudoku.length; x++) {
        int zahl = sudoku[y][x];
        label[x] = new JLabel();
        label[x].setBounds((width * x)+ 200, (height * y) + 50, width,   height);
        label[x].setBorder(BorderFactory.createLineBorder(Color.black));
        label[x].setText(String.valueOf(zahl));
        label[x].setVerticalAlignment(SwingConstants.CENTER);
        label[x].setHorizontalAlignment(SwingConstants.CENTER);
        frame.add(label[x]);
      }
    }

    frame.setResizable(false);
    frame.setVisible(true);
  }
}

...zum Beitrag

Python Tkinter clear geht nicht?

```File "C:\Users\Marek\energyECO\Gewinnspiel\clearEntry.py", line 9, in register_user

vorname_entry.delete(0, END)

AttributeError: 'NoneType' object has no attribute 'delete'```

Das ist der Error

Und das der Code:

from tkinter import *
import csv

def register_user():
    vorname_info = vorname.get()
    nachname_info = nachname.get()
    email_info = email.get()

    # open the file in the write mode
    with open('Benutzernamen.csv', 'a', newline='', encoding='UTF8') as f:
        # create the csv writer
        writer = csv.writer(f, delimiter =';')
        # write a row to the csv file
        row=[vorname_info, nachname_info, email_info]
        writer.writerow(row)
        # close the file
        f.close()

    #vorname_entry.delete(0, END)
    #nachname_entry.delete(-0, END)

    Label(screen1, text="energyECO")

    vorname_entry.delete(0, 'end')
    nachname_entry.delete(0, 'end')
    email_entry.delete(0, 'end')


def register():

    global screen1
    screen1 = Toplevel(screen)
    screen1.title("Gewinnspiel")
    screen1.geometry("550x500")

    global vorname
    global nachname
    global email

    vorname = StringVar()
    nachname = StringVar()
    email = StringVar()

    global vorname_entry
    global nachname_entry
    global email_entry

    Label(screen1, text="Bitte tragen sie ihren Vor- und Nachnamen und außerdem ihre E-Mail ein", font=('Arial 15')).pack()
    Label(screen1, text=" ").pack()
    Label(screen1, text="Vorname * ", font=('Arial 12')).pack()
    vorname_entry = Entry(screen1,width=50, font=('Arial 20'), textvariable=vorname).pack()
    Label(screen1,text=" ").pack()
    Label(screen1, text="Nachname * ", font=('Arial 12')).pack()
    nachnamne_entry = Entry(screen1,width=50, font=('Arial 20'), textvariable=nachname).pack()
    Label(screen1,text=" ").pack()
    Label(screen1, text="E-Mail * ", font=('Arial 12')).pack()
    email_entry = Entry(screen1,width=50, font=('Arial 20'), textvariable=email).pack()
    Label(screen1,text=" ").pack()
    Label(screen1,text=" ").pack()
    Label(screen1,text=" ").pack()
    Label(screen1, text="Mit der Teilnahme am Gewinnspiel und der Eingabe meine Daten erkläre ich mich bereit, den E-Mail Newsletter von energyECO monatlich zu erhalten.", font=("Arial 10")).pack()
    Label(screen1,text=" ").pack()
    Button(screen1, text="Daten senden", font=('Arial 20'), width="15", height="2", command=register_user).pack()


def close():
    print("Closed!")
    screen.destroy()
    screen1.destroy()

def main_screen():
    global screen
    screen = Tk()
    screen.geometry("300x250")
    screen.title("energyECO")

    Label(text="energyECO", bg="gray", width="300", height="2", font=("Calibri", 13)).pack()
    Label(text=" ").pack()
    Button(text="Gewinnspiel", height="2", width="30", command=register).pack()
    Label(text=" ").pack()
    Label(text=" ").pack()
    Label(text=" ").pack()
    Button(text="Close", command=close).pack()
    Label(text=" ").pack()

    screen.mainloop()

main_screen()

...zum Beitrag

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zum Beitrag

Liste im TKinter Fenster Anzeigen?

from tkinter import *

inventory = ['Apfel', 'Banane', ]

inv_list = *inventory, sep = "\n"
inventory_win = Tk()
inventory_win.title('Menu')
inventory_win.geometry("200x155")

Inv_Label = Label(inventory_win, text=inv_list, activebackground='#3a3b3c', background='#2a2b2c', fg='#7a7b7c',
                   width='200', height='200')
Inv_Label.pack()

inventory_win.call('wm', 'attributes', '.', '-topmost', '1')
inventory_win.mainloop()

Wo ist der Fehler?

...zum Beitrag

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zum Beitrag

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zum Beitrag

dieser Fehler in der css: "at-rule or selector expected"?

Hallo Ich habe diesen Fehler in meinem css, jemand weiß, wie man dieses Problem zu behebt? Wie auf dem Bild zu sehen ist, steht da "at-rule or selector expected", aber nach mehreren Versuchen weiß ich nicht, wie ich das Problem lösen kann. Bitte um Hilfe.

@charset "UTF-8"; 
{
  box-sizing: border-box;
}
body {
  font-size: 14px;
  font-family: Inter;
}
.v73_77 {
  width: 595px;
  height: 842px;
  background: rgba(255,255,255,1);
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.v73_79 {
  width: 451px;
  color: rgba(0,0,0,1);
  position: absolute;
  top: 139px;
  left: 53px;
  font-family: Inter;
  font-weight: Regular;
  font-size: 12px;
  opacity: 1;
  text-align: left;
}
.v73_80 {
  width: 160px;
  height: 160px;
  background: rgba(255,243,236,0);
  opacity: 1;
  position: absolute;
  top: 228px;
  left: 28px;
  border: 1px solid rgba(255,117,51,1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}
.v73_81 {
  width: 160px;
  height: 160px;
  background: rgba(255,243,236,0);
  opacity: 1;
  position: absolute;
  top: 228px;
  left: 213px;
  border: 1px solid rgba(255,117,51,1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}

...zum Beitrag

html Unterschrift in die pdf einfügen?

<div class="row">
 <div class="panel">
  <div class="panel-body">
   <div class="col-xs-12">
    <div class="form-group">
     <label for="Unterschrift_1"><b>Unterschrift Fachkraft für Arbeitssicherheit</b></label>
     <div class="wrapper">
      <canvas id="Unterschrift_1" width="700" height="100
      </canvas>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen