crabbly / Print.js

A tiny javascript library to help printing from the web.
MIT License
4.28k stars 672 forks source link

customize css #702

Closed nesic998 closed 4 months ago

nesic998 commented 6 months ago

Hey guys. First of all, library is great.

This is my printJs:

  let printerData = [
    {
          code: "100001",
          name: "Article_1",
          unitOfMeasures: {
            id: 2,
            unitOfMeasures: "piece",
            desc: "Piece",
    },
    {
          code: "100002",
          name: "Article_2",
          unitOfMeasures: {
            id: 2,
            unitOfMeasures: "kg",
            desc: "Kilogram",
    },
    {
          code: "100003",
          name: "Article_3",
          unitOfMeasures: {
            id: 2,
            unitOfMeasures: "piece",
            desc: "Piece",
    },
}

]

        printerProperties = [
          { field: "code", displayName: "Code" },
          { field: "name", displayName: "Name" },
          { field: "unitOfMeasures.unitOfMeasures", displayName: "Unit of Measures" },
        ];

 printJS({
              css: { fontSize: "20px" },
              documentTitle: "",
              header: `<div style="display: flex; justify-content: space-between; align-items: center;"> <p class="custom-h3">Company name</p> <h3 class="custom-h3">Articles</h3> <p class="custom-h3">${currentDate}</p></div>`,
              printable: printerData,
              gridHeaderStyle: "color: red",
              style: `
              @page { size: auto;  margin: 5mm; }   
              th, td {
                padding-left: 5px;
              }
              tr:nth-child(even) {
                background-color: #f2f2f2;
                -webkit-print-color-adjust: exact;
              }

            `,
              properties: printerProperties,
              type: "json",
            });

I have few questions:

i putted documentTitle to be empty but it's not working, i putted this @page { size: auto; margin: 5mm; } . This removed from header: name of the app and time and from footer: localhost:3000...

how can i set text align to right to only one column, for example for "code". I know i can do it with tr:first-of-type but i don't want like that because i am using printJS for a lot of json datas and i don't want every first tr to be text aligned to right. Can we add some id or class name? something like that

And similar problem, how can i modify width of specific column.

Thanks! <3