<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.
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!
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
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>
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.