.NET Core DinkToPDF无法正确显示引导程序列 [英] .NET Core DinkToPDF not showing bootstrap columns properly
本文介绍了.NET Core DinkToPDF无法正确显示引导程序列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这些是我对DinkToPDF的设置:
These are my settings for DinkToPDF:
var document = new HtmlToPdfDocument()
{
GlobalSettings =
{
PaperSize = PaperKind.A4,
Orientation = Orientation.Portrait,
Out = @Path.Combine(path, QuoteId + ".pdf")
},
Objects =
{
new ObjectSettings()
{
HtmlContent = result
}
}
};
converter.Convert(document);
当我通过Web应用程序中的导航加载视图时，它显示的页面很好.但是，当我生成pdf时，根本不使用bootstrap列.而是将右列推入底部，就像在移动视图中一样.
When I load the view via navigation in my web app, it shows the page rendered nicely. However, when I generate the pdf, the bootstrap columns aren't used at all. Instead, the right column is pushed to the bottom as if it were in the mobile view.
DinkToPDF是否还有其他设置可以正确使用引导程序?
Are there any other settings for DinkToPDF to use bootstrap properly?
这是我的查看代码:
@model APPONE.Data.Services.ViewModels.PCVM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="@Model.HostURL/twitter-bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="@Model.HostURL/jqueryui/jquery-ui.css" />
<link rel="stylesheet" href="@Model.HostURL/theme/css/style.css" />
<link rel="stylesheet" href="@Model.HostURL/jquery-modal/jquery.modal.css" />
<link rel="stylesheet" href="@Model.HostURL/css/Modal.css" />
<link rel="stylesheet" href="@Model.HostURL/css/Site.css" />
<link rel="stylesheet" href="@Model.HostURL/css/site-theme-extended.css" />
<link rel="stylesheet" href="@Model.HostURL/css/QuotationForms.css" />
<link rel="stylesheet" href="@Model.HostURL/css/Form-Styles/PCRCss.css" />
</head>
<body>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="main-content">
<section class="section">
<div class="section-header">
<h1>Summary</h1>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control col-sm-12" value="@Model.CommercialProfile.Email" readonly />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Address</label>
<textarea type="text" class="form-control col-sm-12" readonly>@Model.CommercialProfile.Address</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Mobile Number</label>
<input type="text" class="form-control col-sm-12" value="@Model.CommercialProfile.MobileNumber" readonly />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Phone Number</label>
<input type="text" class="form-control col-sm-12" value="@Model.CommercialProfile.PhoneNumber" readonly />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label>Use Of Vehicle</label>
<input type="text" class="form-control col-sm-12" value="@Model.UseOfVehicle" readonly />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Vehicle Number</label>
<input type="text" class="form-control col-sm-12" value="@Model.VehicleNumber" readonly />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Vehicle Sum Insured</label>
<input type="text" class="form-control col-sm-12" value="@Model.VehicleSumInsured" readonly />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h5>Extra Coverage</h5>
<hr />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label>All Drivers</label>
<input type="checkbox" class="form-control col-sm-12 checkbox-item" @Model.ADChecked />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>LLP</label>
<input type="checkbox" class="form-control col-sm-12 checkbox-item" @Model.LLPChecked />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label>SRCC</label>
<input type="checkbox" class="form-control col-sm-12 checkbox-item" @Model.SRCCChecked />
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Nature Disaster</label>
<input type="checkbox" class="form-control col-sm-12 checkbox-item" @Model.NDChecked />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label>LLOP</label>
<input type="checkbox" class="form-control col-sm-12 checkbox-item" @Model.LLOPChecked />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h5>Extra Coverage</h5>
<hr />
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Additional Named Driver</label>
<input type="text" class="form-control col-sm-12" value="@Model.AdditionalNamedDriver" readonly />
</div>
</div>
</div>
</div>
<div class="col-sm-3" id="CalculationPanel">
<div class="row">
<div class="col-sm-12">
<h4>Calculator</h4>
<hr />
</div>
</div>
<div class="row">
<div class="form-group form-inline col-sm-12">
<label class="col-sm-6">Laminated</label>
<input type="text" class="form-control col-sm-6 no-border right-align-text" value="@Model.PrivateCarReadOnly.BasicRO" readonly />
</div>
</div>
<div class="row">
<div class="form-group form-inline col-sm-12">
<label class="col-sm-6">Loading</label>
<input type="text" class="form-control col-sm-6 no-border right-align-text" value="@Model.PrivateCarReadOnly.LoadingRO" readonly />
</div>
</div>
<div class="row">
<div class="form-group form-inline col-sm-12">
<label class="col-sm-6">NCD</label>
<input type="text" class="form-control col-sm-6 no-border right-align-text" value="@Model.PrivateCarReadOnly.NCDRO" readonly />
</div>
</div>
<hr />
<div class="row">
<div class="form-group form-inline col-sm-12">
<label class="col-sm-6 strong">SubTotal</label>
<input type="text" class="form-control col-sm-6 no-border right-align-text strong" value="@Model.PrivateCarReadOnly.SubTotal" readonly />
</div>
</div>
<div class="row">
<div class="form-group form-inline col-sm-12">
<label class="col-sm-6">AD</label>
<input type="text" class="form-control col-sm-6 no-border right-align-text" value="@Model.PrivateCarReadOnly.ADRO" readonly />
</div>
</div>
<hr />
<div class="row">
<div class="form-group form-inline col-sm-12">
<label class="col-sm-6 strong">Total Premium</label>
<input type="text" class="form-control col-sm-6 no-border right-align-text strong" value="@Model.PrivateCarReadOnly.TotalPremiumRO" readonly />
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
推荐答案
DinkToPDF基于wkhtmltopdf，它依此类推
DinkToPDF is based on wkhtmltopdf and it doesn't support flexbox, which bootstrap 4 relays on.
您可以使用 jsreport.net 代替DinkToPDF，示例用法: https://stackoverflow.com/a/45840308/7874927
Instead of DinkToPDF, you can use something like jsreport.net, example usage: https://stackoverflow.com/a/45840308/7874927
这篇关于.NET Core DinkToPDF无法正确显示引导程序列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
