How can I dynamically Add css property to div class using javascript when converting to pdf using rotativa?

Question

<div id="mainDiv" class="watermark" style="font-family: Calibri; padding: 10px; border: 1px solid lightgrey;">
        <script type="text/javascript">
            (function () {
                var watermarkImage = "url(../../Resources/Watermark/" + @Model.Watermark + ".png)";
                var x = document.getElementsByClassName("watermark");

                x.setAttribute('background-image', watermarkImage);
                x.setAttribute('background-repeat', 'repeat-y')
            })();
        </script>

I am using mvc + rotativa to convert cshtml to pdf. I have passed Image name from controller. But when pdf is generated watermark is not coming. I want to add css property to div class using javascript.

Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — rrk, Jun 28 '17 at 06:10
[What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) + `x.style.backgroundImage = ...;` — Andreas, Jun 28 '17 at 06:11

Hardika Satasiya · Answer 1 · 2017-06-28T06:24:05.657

1

If you want to add CSS to a single block having unique id then Try Below Code:

<script type="text/javascript">
            (function () {
                var watermarkImage = "url(../../Resources/Watermark/" + @Model.Watermark + ".png)";
               document.getElementById("mainDiv").style.background-image = watermarkImage;
               document.getElementById("mainDiv").style.background-repeat = 'repeat-y';
             })();
</script>

Hope this will help you!

edited Jun 28 '17 at 06:24

answered Jun 28 '17 at 06:14

Hardika Satasiya

354
2
3
17

No: `.style.background-image`, and no: `.style.'background-repeat` – Andreas Jun 28 '17 at 06:17
Then What is the needs? – Hardika Satasiya Jun 28 '17 at 06:19
The properties are `backgroundImage` and `backgroundRepeat` – Andreas Jun 28 '17 at 06:20
The thing is if I add css properties to div, it wont work. – Nilay Mistry Jun 28 '17 at 06:21
I want to add css properties to class named "watermark" – Nilay Mistry Jun 28 '17 at 06:21
please read [link](https://www.w3schools.com/jsref/met_element_setattribute.asp) carefully. Applying style like : element.setAttribute("style", "background-color: red;"); is bad way to do it. – Hardika Satasiya Jun 28 '17 at 06:34
Thanks mate. Its really helped me. – Nilay Mistry Jun 28 '17 at 06:43

score 1 · Answer 2 · answered Jun 28 '17 at 06:32

1

This may help you

 x.style.background-image= watermarkImage;
 x.style.background-repeat =  repeat-y;

For more information you can use this link https://www.w3schools.com/jsref/met_element_setattribute.asp

answered Jun 28 '17 at 06:32

Margi

182
1
5

Yes, I got the solution `var x = document.getElementsByClassName("watermark"); for (var i = 0; i < x.length; i++) { x[i].style.backgroundImage = watermarkImage; x[i].style.backgroundRepeat = 'repeat-y'; }` – Nilay Mistry Jun 28 '17 at 06:40
But it only works for static url. Its not working for dynamic url from controller – Nilay Mistry Jun 28 '17 at 07:09

score 0 · Answer 3 · answered Jun 30 '17 at 09:12

When using rotativa to generate pdf, "@" symbol depricated the rest of the code when it is used in <script> tag and <style> tag. So we cant set background-image url in variable or cannot pass from controller. I solved by following way

@if (Model.IsArchieved == true && !string.IsNullOrEmpty(Model.ArchivedVersion))
{
    <style type="text/css">
        .watermark {
            background-image: url(../../Resources/Watermark/Archived.png);
            background-repeat: repeat;
            background-size: 600px 300px;
        }
    </style>
}
@if (Model.IsPublished == false)
{
    <style type="text/css">
        .watermark {
            background-image: url(../../Resources/Watermark/Draft5.png);
            background-repeat: repeat;
            background-size: 500px 275px;
        }
    </style>
}

How can I dynamically Add css property to div class using javascript when converting to pdf using rotativa?

3 Answers3