Блог

Главная - Вопросы по программированию - Невозможно применить CSS при просмотре HTML для преобразования PDF MVC Core

Невозможно применить CSS при просмотре HTML для преобразования PDF MVC Core

#html #css #asp.net-core-mvc

#HTML #css #asp.net-core-mvc

Вопрос:

Я не уверен, что ускользает, перепробовал все статьи в Интернете, но не смог разрешить css, наконец, сохранил CSS встроенным в HTML для проверки, но безуспешно.

Визуализировал представление и преобразовал представление в HTML и проанализировал то же самое, но css не применяется. Пожалуйста, посоветуйте.

 <!DOCTYPE html>

<html>
<head>
    <title>Template Preview</title>
</head>

<body style="background: rgb(204,204,204);">
    <!-- /.container -->
    <div class="MainContainer">
        <main role="main" class="pb-3">
            

<style>
    @media print {
    body {
        height: 0;
        margin: 0;
        border-top: none;
    }
}

@page {
    size: A4;
    margin: 0;
}

</style>
<page size="A4" style="background: white;display: block;margin: 0 auto;width: 21cm;height: 29.7cm;">
    <header>
        <div style="width: 100%;height: 125px;position: relative;">
            <img style="width: 100%;height: 100%;" src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" alt="headerbgimg" />
            <div style="position: absolute;left: 20px;top: 5px;display: flex;flex-direction: column;">
                <div style="font-size: large;font-weight: bold;color: white;text-transform: uppercase;letter-spacing: 1px;">
                    <h2>Company Name</h2>
                </div>
                <span style="font-size: large;font-weight: bold;color: black;text-transform: uppercase;letter-spacing: 1px;">Header Text</span>
            </div>
            <div style="position: absolute;right: 5px;top: 5px;width: 140px;height: 120px;">
                <img style="margin-left: 5px;margin-bottom: 5px;height: 100%;width: 100%;" src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" alt="companyLogo" />
            </div>
        </div>
        
    </header>

    <div class="container">
        <div style="position: relative;width: 100%;height: 350px;">
            <div style="position: absolute;display: flex;flex-direction: column;left: 10px;top: 5px;">
                <p style="font-family: Arial, Helvetica, sans-serif;">13 September 2020</p>
                <p style="font-family: Arial, Helvetica, sans-serif;">Travel Limited UK</p>
                <p style="font-family: Arial, Helvetica, sans-serif;">Valid Untill 15 September 2020</p>
                <p style="font-family: Arial, Helvetica, sans-serif;"><b>DEPARTURE DATE: </b>15 September 2020</p>
                <p style="font-family: Arial, Helvetica, sans-serif;"><b>TOTAL NUMBER TRAVELLERS: </b>10</p>
                <p style="font-family: Arial, Helvetica, sans-serif;"><b>NUMBER OF DAYS: </b>3</p>
            </div>
        </div>
    </div>
</page>
        </main>
    </div>
</body>
</html>

Метод действия для отображения PDF в браузере

 public async Task<IActionResult> GetPDF()
    {
        MemoryStream msPDF = new MemoryStream(await ParsePDFDocument());
        return new FileStreamResult(msPDF, "application/pdf");
    }

public async Task<byte[]> ParsePDFDocument()
    {
        Document document = new Document();
        byte[] result = null;

        #region HTML

        DummyData dummyData = new DummyData()
        {
            CompanyName = "Company Name.",
            HeaderText = "Header Text",

            ItineraryDate = DateTime.Now.ToLongDateString(),
            TravelCompanyName = "Travel Limited UK",
            ValidityPeriod = "Valid Untill "   DateTime.Now.AddDays(2).ToLongDateString(),
            TravellersCount = 10,
            DaysCount = 3,
            DepartureDate = DateTime.Now.AddDays(2).ToLongDateString(),

            ItineraryCode = "DS_001",
            EmailAddress = "ABC@XYZ.COM",
            Telephone = " 91 1234 123 123"
        };
            #endregion
//This will parse the cshtml view and give the HTML string
        var viewHtml = await this.RenderViewAsync<DummyData>("Index", dummyData);

        List<string> cssFiles = new List<string>();

        cssFiles.Add("NewStyle.css");

        using (MemoryStream memoryStream = new MemoryStream())
        {
            PdfWriter writer = PdfWriter.GetInstance(document, memoryStream);
            writer.CloseStream = false;
            document.Open();
            HtmlPipelineContext htmlContext = new HtmlPipelineContext(null);
            htmlContext.SetTagFactory(Tags.GetHtmlTagProcessorFactory());

            ICSSResolver cssResolver = XMLWorkerHelper.GetInstance().GetDefaultCssResolver(false);
            cssFiles.ForEach(i => cssResolver.AddCssFile(Path.Combine(hostEnvironment.WebRootPath, "lib\bootstrap\dist\css\"   i), true));

            IPipeline pipeline = new CssResolverPipeline(cssResolver, new HtmlPipeline(htmlContext, new PdfWriterPipeline(document, writer)));
            XMLWorker worker = new XMLWorker(pipeline, true);
            XMLParser xmlParser = new XMLParser(worker);

            xmlParser.Parse(new MemoryStream(Encoding.UTF8.GetBytes(viewHtml)));

            document.Close();

            result = memoryStream.GetBuffer();
        }
        return resu<
    }

Ответ №1:

Причина, по которой вы не можете применить CSS, заключается в том, что вы не смогли успешно получить путь к вложенным файлам в папке «lib bootstrap dist css «.

Вот демонстрация, которая может успешно получить путь, попробуйте изменить свой код следующим образом:

 List<string> cssFiles = new List<string>();
cssFiles.Add("NewStyle.css");
DirectoryInfo d = new DirectoryInfo(Path.Combine(hostEnvironment.WebRootPath, "lib\bootstrap\dist\css\"));
//your code
ICSSResolver cssResolver = XMLWorkerHelper.GetInstance().GetDefaultCssResolver(false);
foreach (var file in d.GetFiles("*.css"))
    {
    cssResolver.AddCssFile(Path.Combine(hostEnvironment.WebRootPath, "lib\bootstrap\dist\css\"   file.Name), true);                              
     }

Надеюсь, это может вам помочь.
введите описание изображения здесь

Комментарии:

1. Спасибо, что пришли помочь, но я получаю то же самое и просто использую здесь только один CSS-файл. Действительно ли мне нужно добавлять другие файлы? Я чувствую, что, вероятно, упускаю что-то еще при преобразовании. Не могли бы вы опубликовать свой демонстрационный код, чтобы я мог попробовать оттуда?

2. Если вы просто добавляете CSS-файл, вам нужно только использовать cssResolver. AddCssFile(путь. Объединить (hostEnvironment. WebRootPath, «lib\bootstrap\dist\css\bootstrap.min.css» ), true); Кроме того, я хочу сказать, что iTextSharp и xmlworker несовместимы в .net Core, поэтому я предлагаю вам использовать iText7.