无法将View HTML上的CSS应用于PDF转换MVC Core

如何解决无法将View HTML上的CSS应用于PDF转换MVC Core

我不确定是什么溜走了，尝试了互联网上的所有文章，但无法解析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,sans-serif;">Travel Limited UK</p>
                <p style="font-family: Arial,sans-serif;">Valid Untill 15 September 2020</p>
                <p style="font-family: Arial,sans-serif;"><b>DEPARTURE DATE: </b>15 September 2020</p>
                <p style="font-family: Arial,sans-serif;"><b>TOTAL NUMBER TRAVELLERS: </b>10</p>
                <p style="font-family: Arial,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 result;
    }

解决方法

之所以不能应用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);                              
     }

希望这可以为您提供帮助。

无法将View HTML上的CSS应用于PDF转换MVC Core

如何解决无法将View HTML上的CSS应用于PDF转换MVC Core

解决方法

相关推荐