问题
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);
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.
Are there any other settings for DinkToPDF to use bootstrap properly?
Here is my view code:
@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>
回答1:
DinkToPDF is based on wkhtmltopdf and it doesn't support flexbox, which bootstrap 4 relays on.
Instead of DinkToPDF, you can use something like jsreport.net, example usage: https://stackoverflow.com/a/45840308/7874927
来源：https://stackoverflow.com/questions/55432418/net-core-dinktopdf-not-showing-bootstrap-columns-properly