使用Rotativa轉換為pdf時，如何使用javascript動態將CSS屬性添加到div類？

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>

我正在使用mvc + rotativa將cshtml轉換為pdf。 我已經從控制器傳遞了圖像名稱。 但是，當生成pdf時，不會出現水印。 我想使用javascript將CSS屬性添加到div類。

Answer 1

如果要將CSS添加到具有唯一ID的單個塊中，請嘗試以下代碼：

<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>

希望這個能對您有所幫助！

Answer 2

這可能對您有幫助

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

有關更多信息，您可以使用此鏈接https://www.w3schools.com/jsref/met_element_setattribute.asp

Answer 3

使用rotativa生成pdf時，在<script>標記和<style>標記中使用“ @”符號表示其余代碼。 因此，我們無法在變量中設置背景圖片網址或無法從控制器傳遞。 我通過以下方式解決了

@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>
}