打印模式内容而不更改样式
我有一个模态，上面有一些数据，我需要像模态上一样打印它。我有一些JavaScript可以在div上打印内容所在的div，但问题是在打印过程中无法识别bootstrap类，因此整个布局都会更改。
function printDiv() {
var winPrint = window.open();
/*var header = '@include("report/header")';*/
/*var body = '@include("memberpayment/monthlybill")';*/
var body = document.getElementById('printarea').innerHTML;
winPrint.document.write(body);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();
}
我的情态：
我的打印视图：
通过在线搜索，我似乎需要在编写打印内容（source）之前包含引导程序库
这对我不起作用，因为当我在打印视图上给出空白的2页之前写入文件时。我尝试使用jQuery插件printThis
4：https://www.jqueryscript.net/other/Customizable-Multiple-Elements-Printing-Plugin-With-jQuery-printThis.html也不可行。
in this question似乎在链接中添加了media =“ print”似乎也可以，但是对我来说不起作用。
这是我的模态代码：
<div class="container-fluid" id="printarea" style="padding: 2rem 4rem;">
<!-- ----------------------top heading part---------------------- -->
<div class="row" style="border: 1px solid black;">
<div class="col-md-4 center">
@if(file_exists(public_path().'/bzBuilder/images/'.CNF_LOGO) && CNF_LOGO !='')
<img src="{{ asset('bzBuilder/images/'.CNF_LOGO)}}" width="150" alt="{{ CNF_APPNAME }}"/>
@else
<img src="{{ asset('bzBuilder/images/logo.png')}}" width="150" alt="{{ CNF_APPNAME }}"/>
@endif
</div>
<div class="col-md-8 center arial" style="font-weight: bold;">
<p style="padding-top: 1rem;">
Royal Bombay Yacht Club
</p>
<p>
C.S.M Marg, Apollo Bunder, Mumbai - 400001.Tel : +91-22-22021880 / 67527200.
</p>
<p>
Fax : +91-22-2202 1014 Email: rbycmail@vsnl.net & billing@rbyc.co.in
</p>
</div>
</div>
<!-- ----------------------details and address ---------------------- -->
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<p><b>GODREJ ADI BURJOR ESQ., [G0014 ]</b></p>
<br>
<p>
OFFICE - GODREJ INDUSTRIES LIMITED,
PIROJSHANAGAR, EASTERN EXPRESS HIGHWAY, VIKHROLI, MUMBAI - 400 079
</p>
</div>
<div class="col-md-6 col-sm-12 col-xs-12" style="border: 1px solid black;">
<div class="inline-block col-md-6 col-sm-12 col-xs-12">Membership No: <b>G0014</b></div>
<div class="inline-block col-md-6 col-sm-12 col-xs-12">Bill Dated: <b>21/08/2018</b></div>
<div class="inline-block col-md-6 col-sm-12 col-xs-12">BillRef : <b>G0014-8</b></div>
<div class="inline-block col-md-6 col-sm-12 col-xs-12">Due Date: <b>15/10/2018</b></div>
</div>
</div>
<br>
<!-- ----------------------from/to date ---------------------- -->
<div class="row centerWhenSmall">
<div class="col-md-3 col-sm-12">From: <b>01-Aug-2018</b></div>
<div class="col-md-3 col-sm-12">To: <b>31-Aug-2018</b></div>
</div>
<!-- ----------------------table top part---------------------- -->
<div class="row tablePadding">
<table class="customTable">
<tr>
<th>Narration</th>
<th class="center">Dr.</th>
<th class="center">Cr.</th>
</tr>
</table>
</div>
<!-- ----------------------table mid part---------------------- -->
<div class="row tablePadding2">
<table class="customTable2">
<tr>
<th>BNo:32775 on 21/08/18 - DINING ROOM</th>
<th class="borderBottom center">1,082.00 </th>
<th class="borderBottom center"></th>
</tr>
</table>
</div>
<!-- ----------------------table body---------------------- -->
<div class="row tablePadding3">
<table class="customTable3">
{{--<tr>--}}
{{--<th class="center">Monthly Total : </th>--}}
{{--<th class="center">1,082.00</th>--}}
{{--<th class="center">0.00</th>--}}
{{--</tr>--}}
{{--<tr>--}}
{{--<th class="center">Previous Outstanding : </th>--}}
{{--<th class="borderBottom center">0.00</th>--}}
{{--<th class="borderBottom center">0.00</th>--}}
{{--</tr>--}}
{{--<tr>--}}
{{--<th class="center">Amount Due/Credit Balance : </th>--}}
{{--<th class="borderBottom center">1,082.00</th>--}}
{{--<th class="borderBottom center">0.00</th>--}}
{{--</tr>--}}
</table>
</div>
<br>
<!-- ----------------------disclaimer---------------------- -->
<div class="row">
<div class="col-md-12 col-sm-12 center">
This is a computer generated invoice and does not require signature .
</div>
<div class="col-md-12 col-sm-12">
Bill Dated : 21/08/2018
</div>
<div class="col-md-12 col-sm-12 borderBottom">
<b>To be cleared by : 15/October/2018</b>
</div>
</div>
<!-- ----------------------notice---------------------- -->
<div class="row">
<div class="col-md-12 col-sm-12" style="margin-bottom: 3%;">
IF YOUR BILL SHOWS ARREARS,THEN ENTIRE AMOUNT BE PAID IMMEDIATELY.
</div>
<div class="col-md-12" style="text-decoration: underline;">
Amount Due/Credit Balance Is As On 31 August 2018. Subsequent Payments Will Be Credited In The Following Month.
</div>
<div class="col-md-12">
PAYMENT RECEIVED AFTER DUE DATE ATTRACT DELAYED PAYMENT CHARGES @ 2% ON OUTSTANDING AMOUNT
</div>
<div class="col-md-12">
<b style="font-weight: 900">REQUEST INFORM DETAILS OF PAYMENT MADE BY BANK TRANSFER/NEFT/RTGS/ BY EMAIL TO
accounts@rbyc.co.in and billing@rbyc.co.in FOR PROMPT UPDATION OF MEMBERS ACCOUNT</b>
</div>
<div class="col-md-12">
Beneficiary : Royal Bombay Yacht Club
</div>
</div>
<!-- ----------------------bank details---------------------- -->
<div class="row">
<div class="col-md-6">
<b style="font-weight: 800">HDFC BANK</b><br>
REGAL CINEMA BUILDING,<br>
SHAHID BHAGATSINGH ROAD,<br>
MUMBAI - 400 039<br>
Current Account No : <b>00852530000017</b><br>
SWIFT NO: <b>HDFCINBB</b> [ OVERSEAS TRANSFER ]*<br>
IFSC NO: <b>HDFC0000085</b> [ IN INDIA TRANSFER ] *
</div>
<div class="col-md-6">
<b style="font-weight: 800">YES BANK LTD.</b><br>
Mittal Chambers, Nariman Point,<br>
MUMBAI - 400 021<br>
Savings Account No : <b>000494600000162</b><br>
SWIFT NO : <b>YESBINBB</b> [ OVERSEAS TRANSFER]*<br>
IFSC NO : <b>YESB0000004</b> [ IN INDIA TRANSFER ]*
</div>
</div>
<!-- ----------------------notice 2---------------------- -->
<div class="row">
<div class="col-md-12" style="font-weight: 900">
MEMBERS ARE REQUESTED TO CARRY THEIR MEMBERSHIP CARD AND PRODUCE IT WHEN PLACING AN
ORDER.THIS IS TO AVOID ANY ERRORS IN BILLING.
</div>
</div>
<!-- ----------------------vat tin pan gst---------------------- -->
<div class="row">
<div class="col-md-9" style="font-size: 1.3rem; width: 70%;">
<div class="col-md-4">VAT TIN : 27720003820V</div>
<div class="col-md-4">PAN : AAAAR0071R</div>
<div class="col-md-4">GST : 27AAAAR0071R1Z7</div>
</div>
<div class="col-md-6"></div>
</div>
<!-- ----------------------bottom paragraph---------------------- -->
<div class="row">
<div class="col-md-12">
I/We certify that our S.T registration Certificate under B.S.T Act 1959 is in force on the date on which the sale of the goods
specified in this bill/cash memorandum and that the transactions of sale covered by this bill/cash memorandum has been
effected by us in the regular course of our business.
</div>
</div>
<!-- ----------------------disclaimer 2---------------------- -->
<div class="row">
<div class="col-md-12 col-sm-12 center">
This is a computer generated invoice and does not require signature .
</div>
</div>
<!-- ----------------------bottom---------------------- -->
<div class="row" style="margin-top: 20%;">
<div class="col-md-12 center">
--------------------------------------PLEASE TEAR OFF AND SEND THIS WITH YOUR CASH/CHEQUE------------------------------------
</div>
<div class="col-md-12 center">
I am sending herewith cash/cheque for Rs.___________________ in payment of BillRef :
G0014-8 dated: 21/08/2018 Name: GODREJ ADI BURJOR ESQ., [G0014 ]
</div>
</div>
<!-- ----------------------print---------------------- -->
</div>
<div class="row" style="margin-bottom: 5%; ">
<div class="col-md-5"></div>
<div class="col-md-3">
<button style="text-align: center;" type="button" onclick='printDiv();' class="btn btn-primary btn-sm print-bill"><i
class="fa fa-print"></i> Print
</button>
<!-- <button style="text-align: center;" type="button" class="btn btn-primary btn-sm print-bill">
<i class="fa fa-print"></i> Print
</button> -->
<button type="button" class="btn btn-info btn-sm pay-bill" data-toggle="modal" data-target="#paybill">PAY
</button>
</div>
<div class="col-md-4"></div>
</div>
1 个答案:
答案 0 :(得分：0)
创建用于打印的HTML时，请注意，元素css float在用于HTML打印的跨浏览器中不能很好地工作。
因此，要快速解决您的问题，请在模式HTML内的CSS下方添加CSS（开头）-
<style>
/* this stylesheet is used when generating a PDF */
/* define a page */
@page {
size: auto; /* OR 6.5in 8.5in; A4 */
margin-top: 0.5cm;
margin-left: 0.5cm;
margin-right: 0.5cm;
}
@media print {
[class*="col-md-"] {
float: none;
display:table-cell;
}
[class*="col-lg-"] {
float: none;
display:table-cell;
}
}
</style>
此外，在您的html中，可以进行一些改进以使其与打印更加兼容。
希望对您有所帮助。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？