Generate html to pdf (support css sytle)

Question

I need to get PDF output from HTML and CSS so that most of the properties support CSS Backend site written by Laravel For example, I made these bugs with HTML and CSS; I made an ellipse, which is basically a square whose corners are curved with border-radius. I want to get a PDF output from the white box.

Please support the package you introduce in Persian/Arabic language

Thank you

<html lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
            border-radius: 0;
            box-sizing: border-box;
        }

        body {
            page-break-inside: avoid;
            width: 500px;
            height: 1000px;
            background:green;
        }

        .d-flex {
            display: flex;
        }

        .flex-column {
            flex-direction: column;
        }

        .justify-center {
            justify-content: center;
        }

        .absolute {
            position: absolute;
        }
        .triangle-div {
            width: 0 !important;
            height: 0 !important;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 50px solid black;
        }
        @page {

        }
    </style>
</head>

<body>
<div style="width: 15cm;height: 10cm;background-color: white;position: relative;overflow: hidden;margin: 50px">

    <div data-v-0c28de28="" class="triangle-div transform-center absolute" style="width: 148px; height: 160px; top: 293px; left: 77px; font-size: 16px; text-align: center; font-weight: normal; border-radius: 3px; color: rgb(0, 0, 0); background-size: 100% 100%; background-color: transparent; border-bottom-color: #2FD39A; transform: translate(-50%, -50%) rotate(0deg); border-right-width: 74px; border-left-width: 74px; border-bottom-width: 160px;z-index: 11"></div>
    <div class="absolute" style="width: 400px; height: 200px; top: 100px; left: 200px; font-size: 16px; text-align: center; font-weight: normal; color: blue; background-size: 100% 100%; background-color: yellow; border-bottom-color: transparent;border-radius: 200px / 100px;z-index: 8"></div>
    <div class="absolute" style="display:flex;justify-content:center;flex-direction:column;text-align:center;width: 209px; height: 112px; top: 100px; left: 0px; font-size: 16px; font-weight: normal; border-radius: 3px; color: blue; background-size: 100% 100%; background-color: red; border-bottom-color: transparent; transform: rotate(-45deg);z-index: 0">
        این یک متن است
    </div>
    <div data-v-0c28de28="" class="squre-div transform-center absolute" style="width: 161px; height: 159px; top: 85px; left: 244px; font-size: 16px; text-align: center; font-weight: normal; border-radius: 3px; color: rgb(0, 0, 0); background-size: 100% 100%; background-color: #7E57C2; border-bottom-color: rgb(0, 0, 0); transform: translate(-50%, -50%) rotate(0deg);z-index: 9"></div>
</div>
</body>
</html>

[Try pandoc](https://stackoverflow.com/a/44180516) – JansthcirlU Aug 25 '21 at 10:27 — JansthcirlU, Aug 25 '21 at 10:27

score 0 · Answer 1 · answered Aug 25 '21 at 13:49

I had fun with jsPDF a while back.
It requires programming but is pretty simple to work with when it works.
You will have to try if it meets your needs.

It has basic html support. I believe simple styles from the print CSS are used.

For UTF-8 support I remember you must provide your own font to be embedded.

More information can be found here:
GitHub page: https://github.com/MrRio/jsPDF
Documentation: http://raw.githack.com/MrRio/jsPDF/master/docs/index.html

Here is an answer from StackOverflow with an example code: https://stackoverflow.com/a/68590636/10441671

const doc = new jsPDF('p', 'pt', 'a4');
const div = ...your code to get the html
await doc.html(div);
doc.save('test.pdf'); // save / download
doc.output('dataurlnewwindow'); // just open it

Generate html to pdf (support css sytle)

1 Answers1