我不确定是哪个必需的库引起了这个问题,或者它是否与Bootstrap有关,但是我不能让输出的PDF显示边框。
我试过增加边框的宽度,但它被忽略了,不知道该怎么做。
小提琴:https://jsfiddle.net/8q7ce58y/233/
我试过在模态体中使用.clone()
,但它只呈现窗口视图上的内容。
代码:(最好检查一下小提琴)
<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg modal-a4" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Doc Preview</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row m-0">
<div class="col">
<p align="center">Text<br></p>
</div>
</div>
<div class="row m-0">
<div class="col">
<p><b><span style="font-size: 18px;">Field :</span></b> </p>
<p>{Field_Name}
</p>
</div>
</div>
<h3 class="text-center p-2 m-0">Images</h3>
<div class="row attachment-row m-0">
<div class="col-6 text-center p-2">
Image1
</div>
<div class="col-6 text-center p-2">
Image2
</div>
</div>
</div>
<div class="modal-footer"><button class="ml-auto btn btn-primary ld-ext-right">Download PDF<div class="ld ld-ring ld-cycle running"></div></button></div>
</div>
</div>
</div>
CSS:
.modal-dialog.modal-a4{
width: 8.27in !important;
padding: 0;
}
.modal-a4 .modal-body>*:last-child {
border-bottom: 10px solid black;
}
.modal-a4 .modal-body>* {
border-left: 10px solid black;
border-right: 10px solid black;
}
.modal-a4 .modal-body>*:not(.attachment-row) {
border-top: 10px solid black;
}
3条答案
按热度按时间mqkwyuun1#
我在jsPDF中使用了html2canvas
图书馆
下载html2canvas:https://html2canvas.hertzen.com/
并通过按钮或输入调用函数:
cgfeq70w2#
html 2canvas不支援css border-left / border-right属性。它只支援border-color、border-width、border-style。请参阅文件:https://html2canvas.hertzen.com/features
ifsvaxew3#
我解决了添加模态的问题,供大家参考。做得好!库jsPdf
如果您想要新选项卡==〉