这些是我对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列。而是将右列推到底部,就像在移动视图中一样。
DinkToPDF还有其他设置可以正确使用引导程序吗?
这是我的查看代码:
@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>
答案 0 :(得分:3)
DinkToPDF基于wkhtmltopdf及其doesn't support flexbox,它引导4 relays on。
您可以使用jsreport.net之类的示例来代替DinkToPDF:https://stackoverflow.com/a/45840308/7874927