生成PDF时wkHtmlToPdf CSS不适用
[英]wkHtmlToPdf css is not applying when generate the PDF
问题描述
I have a MVC application and want to generate PDF using HTML. 
我有一个MVC应用程序，想使用HTML生成PDF。 In here I use wkHTMLtoPdf exe to do my job. 在这里，我使用wkHTMLtoPdf exe来完成我的工作。
I call to an action method from client side using jquery. 我使用jquery从客户端调用动作方法。 Then it hit to below method. 然后打到下面的方法。
public FileContentResult ExportInvoiceASPDF(string invno)
{
try
{
Byte[] bytes;
var fullUrl = this.Url.Action("pdfCustomerInvoice", "Report", new { invNo = invno }, Request.Url.Scheme);
bytes = WKHtmlToPdf(fullUrl);
FileContentResult result = new FileContentResult(bytes, "application/pdf")
{
FileDownloadName = "PriceNotification"
};
return File(result.FileContents, "application/pdf");
}
catch (Exception ex)
{
throw;
}
}
In here I called to WKHtmlToPdf function for getting byte stream. 在这里，我调用了WKHtmlToPdf函数来获取字节流。 (Below code extracted from stackoverflow thread) （下面的代码是从stackoverflow线程中提取的）
public byte[] WKHtmlToPdf(string url_input)
{
try
{
var fileName = " - ";
var wkhtmlDir = ConfigurationSettings.AppSettings["wkhtmlDir"];//Directory of wkHtmltopdf exe
var wkhtml = ConfigurationSettings.AppSettings["wkhtml"];//wkhtmltopdf exe location
var p = new Process();
url = url_input;
p.StartInfo.CreateNoWindow = true;
p.StartInfo.RedirectStandardOutput = true;
p.StartInfo.RedirectStandardError = true;
p.StartInfo.RedirectStandardInput = true;
p.StartInfo.UseShellExecute = false;
p.StartInfo.FileName = wkhtml;
p.StartInfo.WorkingDirectory = wkhtmlDir;
string switches = "";
switches += "--print-media-type ";
switches += "--margin-top 10mm --margin-bottom 10mm --margin-right 10mm --margin-left 10mm ";
switches += "--page-size Letter ";
p.StartInfo.Arguments = switches + " " + url + " " + fileName;
p.Start();
//read output
byte[] buffer = new byte[32768];
byte[] file;
using (var ms = new MemoryStream())
{
while (true)
{
int read = p.StandardOutput.BaseStream.Read(buffer, 0, buffer.Length);
if (read <= 0)
{
break;
}
ms.Write(buffer, 0, read);
}
file = ms.ToArray();
}
// wait or exit
p.WaitForExit(60000);
// read the exit code, close process
int returnCode = p.ExitCode;
p.Close();
return returnCode == 0 ? file : null;
}
catch (Exception ex)
{
// set your exceptions here
return null;
}
}
Here I execute the view. 在这里，我执行视图。 (the page which I want to export as PDF) （我想导出为PDF的页面）
public ActionResult pdfCustomerInvoice(string invNo)
{
var inv = _customerInvoiceService.GetCustomerInvoice(invNo);
InvoiceSummaryReportsVM invRepVM = new InvoiceSummaryReportsVM();
//My data assigning part going here
return View(invRepVM);
}
Here is pdfCustomerInvoice html. 这是pdfCustomerInvoice html。
@model Pro.Web.Models.ViewModels.InvoiceSummaryReportsVM
@{
Layout = null;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="center">
<h2>Tax Invoice</h2>
</div>
<div class="row">
<br />
<br />
<br />
<br />
<br />
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
@Html.LabelFor(model => model.InvoiceNo, htmlAttributes: new { @class = "control-label" })
</div>
<div class="col-md-3">
@Html.DisplayFor(model => model.InvoiceNo, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="row">
<div class="col-md-3">
@Html.LabelFor(model => model.InvoiceDate, htmlAttributes: new { @class = "control-label" })
</div>
<div class="col-md-3">
@Html.DisplayFor(model => model.InvoiceDate, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="row">
<div class="col-md-3">
@Html.LabelFor(model => model.AccountNo, htmlAttributes: new { @class = "control-label" })
</div>
<div class="col-md-3">
@Html.DisplayFor(model => model.AccountNo, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="row">
<div class="col-md-3">
@Html.LabelFor(model => model.InvoiceStatementPeriod, htmlAttributes: new { @class = "control-label" })
</div>
<div class="col-md-3">
@Html.DisplayFor(model => model.InvoiceStatementPeriod, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
@Html.LabelFor(model => model.OpeningBalance, htmlAttributes: new { @class = "control-label" })
</div>
<div class="col-md-6">
@Html.DisplayFor(model => model.OpeningBalance, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="row">
<div class="col-md-6">
@Html.LabelFor(model => model.InvoiceTotal, htmlAttributes: new { @class = "control-label" })
</div>
<div class="col-md-6">
@Html.DisplayFor(model => model.InvoiceTotal, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="row">
<div class="col-md-6">
@Html.LabelFor(model => model.TaxAmount, htmlAttributes: new { @class = "control-label" })
</div>
<div class="col-md-6">
@Html.DisplayFor(model => model.TaxAmount, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="row">
<div class="col-md-6">
@Html.LabelFor(model => model.TotalAmountPayable, htmlAttributes: new { @class = "control-label" })
</div>
<div class="col-md-6">
@Html.DisplayFor(model => model.TotalAmountPayable, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
</body>
</html>
The issue is when I execute the code, it is generated the PDF without styling. 问题是当我执行代码时，它会生成没有样式的PDF。 (All data align to left side.) But when I call to "pdfCustomerInvoice" method directly, the html comes properly with styling. （所有数据都对齐到左侧。）但是当我直接调用“ pdfCustomerInvoice”方法时，html样式正确。
In here I have styling issue. 在这里，我有样式问题。 Please give me a direction for fixing this problem. 请给我指导以解决此问题。
1 个解决方案
解决方案1
1 2017-01-16 12:25:35
It seems that bootstrap won't load then. 引导程序似乎不会加载。 Try to link bootstrap css from your file system. 尝试从文件系统链接引导CSS。
For details: https://stackoverflow.com/a/20357784/6589639 有关详细信息： https : //stackoverflow.com/a/20357784/6589639
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.