给定目标整个div是否不使用jspdf导出为pdf? [英] Given targeted whole div is not exporting as a pdf using jspdf?
本文介绍了给定目标整个div是否不使用jspdf导出为pdf?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在将bootstrap modal导出为pdf.这是我的html代码
I am exporting bootstrap modal as a pdf. Here is my html code
<div class="modal fade" id="myModalLarge" tabindex="-1" role="dialog" aria-labelledby="myModalLabelLarge" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabelLarge">Load Sensor Report</h4>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="row">
<div class="col-lg-12">
<div class="modal-body" id="content">
<div class="row" id="widgets">
<div class="col-xl-4 col-lg-6 col-md-12">
<!-- START date widget-->
<div class="card bg-info-light pt-2 b0">
<div class="px-2">
<em class="icon-bubbles fa-lg float-right"></em>
<div class="h2 mt-0">500</div>
<div class="text-uppercase" style="padding-bottom: 10px">Live Force</div>
</div>
<div data-sparkline="" data-type="line" data-width="100%" data-height="75px" data-line-color="#23b7e5" data-chart-range-min="0"
data-fill-color="#23b7e5" data-spot-color="#23b7e5" data-min-spot-color="#23b7e5"
data-max-spot-color="#23b7e5" data-highlight-spot-color="#23b7e5" data-highlight-line-color="#23b7e5"
data-values="2,3,5,1,5,9" style="margin-bottom: -2px" data-resize="true"></div>
</div>
<!-- END date widget-->
</div>
<div class="col-xl-4 col-lg-6 col-md-12">
<!-- START date widget-->
<div class="card bg-info-light pt-2 b0">
<div class="px-2">
<em class="icon-bubbles fa-lg float-right"></em>
<div class="h2 mt-0">500</div>
<div class="text-uppercase" style="padding-bottom: 10px">Live Repititions</div>
</div>
<div data-sparkline="" data-type="line" data-width="100%" data-height="75px" data-line-color="#23b7e5" data-chart-range-min="0"
data-fill-color="#23b7e5" data-spot-color="#23b7e5" data-min-spot-color="#23b7e5"
data-max-spot-color="#23b7e5" data-highlight-spot-color="#23b7e5" data-highlight-line-color="#23b7e5"
data-values="4,5,3,10,7,15" style="margin-bottom: -2px" data-resize="true"></div>
</div>
<!-- END date widget-->
</div>
<div class="col-xl-4 col-lg-6 col-md-12">
<!-- START card-->
<div class="card bg-info-light pt-2 b0">
<div class="px-2">
<em class="icon-bubbles fa-lg float-right"></em>
<div class="h2 mt-0">500</div>
<div class="text-uppercase" style="padding-bottom: 10px">Live Sets</div>
</div>
<div data-sparkline="" data-type="line" data-width="100%" data-height="75px" data-line-color="#23b7e5" data-chart-range-min="0"
data-fill-color="#23b7e5" data-spot-color="#23b7e5" data-min-spot-color="#23b7e5"
data-max-spot-color="#23b7e5" data-highlight-spot-color="#23b7e5" data-highlight-line-color="#23b7e5"
data-values="4,5,3,10,7,15" style="margin-bottom: -2px" data-resize="true"></div>
</div>
</div>
</div>
<!-- chart card start-->
<div class="row">
<div class="col-xl-12">
<!-- START card-->
<div class="card card-default card-demo" id="cardChart9">
<div class="card-header">
<a class="float-right" href="#" data-tool="card-refresh" data-toggle="tooltip" title="Refresh card">
<em class="fas fa-sync"></em>
</a>
<a class="float-right" href="#" data-tool="card-collapse" data-toggle="tooltip" title="Collapse card">
<em class="fa fa-minus"></em>
</a>
<div class="card-title">Live Activity Data</div>
</div>
<div class="card-wrapper collapse show">
<div class="card-body">
<canvas id="myChart1"></canvas>
</div>
</div>
</div>
<!-- END card-->
</div>
</div>
<div class="row">
<div class="col-xl-3 col-lg-6 col-md-12">
<!-- START date widget-->
<div class="card bg-purple-light pt-2 b0">
<div class="px-2">
<em class="icon-bubbles fa-lg float-right"></em>
<div class="h4 mt-0" id="m_tf">--</div>
<div class="text-uppercase" style="padding-bottom: 10px;font-weight:bold;font-size: 12px">Target Force</div>
</div>
<div data-sparkline="" data-type="line" data-width="100%" data-height="75px" data-line-color="#23b7e5" data-chart-range-min="0"
data-fill-color="#23b7e5" data-spot-color="#23b7e5" data-min-spot-color="#23b7e5"
data-max-spot-color="#23b7e5" data-highlight-spot-color="#23b7e5" data-highlight-line-color="#23b7e5"
data-values="2,3,5,1,5,9" style="margin-bottom: -2px" data-resize="true"></div>
</div>
<!-- END date widget-->
</div>
<div class="col-xl-3 col-lg-6 col-md-12">
<!-- START date widget-->
<div class="card bg-purple-light pt-2 b0">
<div class="px-2">
<em class="icon-bubbles fa-lg float-right"></em>
<div class="h4 mt-0">500</div>
<div class="text-uppercase" style="padding-bottom: 10px;font-weight:bold;font-size: 12px">Average Force</div>
</div>
<div data-sparkline="" data-type="line" data-width="100%" data-height="75px" data-line-color="#23b7e5" data-chart-range-min="0"
data-fill-color="#23b7e5" data-spot-color="#23b7e5" data-min-spot-color="#23b7e5"
data-max-spot-color="#23b7e5" data-highlight-spot-color="#23b7e5" data-highlight-line-color="#23b7e5"
data-values="4,5,3,10,7,15" style="margin-bottom: -2px" data-resize="true"></div>
</div>
<!-- END date widget-->
</div>
<div class="col-xl-3 col-lg-6 col-md-12">
<!-- START card-->
<div class="card bg-purple-light pt-2 b0">
<div class="px-2">
<em class="icon-bubbles fa-lg float-right"></em>
<div class="h4 mt-0" id="m_tr">--</div>
<div class="text-uppercase" style="padding-bottom: 10px;font-weight:bold;font-size: 12px">Target Repetions</div>
</div>
<div data-sparkline="" data-type="line" data-width="100%" data-height="75px" data-line-color="#23b7e5" data-chart-range-min="0"
data-fill-color="#23b7e5" data-spot-color="#23b7e5" data-min-spot-color="#23b7e5"
data-max-spot-color="#23b7e5" data-highlight-spot-color="#23b7e5" data-highlight-line-color="#23b7e5"
data-values="4,5,3,10,7,15" style="margin-bottom: -2px" data-resize="true"></div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-12">
<!-- START card-->
<div class="card bg-purple-light pt-2 b0">
<div class="px-2">
<em class="icon-bubbles fa-lg float-right"></em>
<div class="h4 mt-0">12</div>
<div class="text-uppercase" style="padding-bottom: 10px;font-weight:bold;font-size: 12px">Average Repetions</div>
</div>
<div data-sparkline="" data-type="line" data-width="100%" data-height="75px" data-line-color="#23b7e5" data-chart-range-min="0"
data-fill-color="#23b7e5" data-spot-color="#23b7e5" data-min-spot-color="#23b7e5"
data-max-spot-color="#23b7e5" data-highlight-spot-color="#23b7e5" data-highlight-line-color="#23b7e5"
data-values="4,5,3,10,7,15" style="margin-bottom: -2px" data-resize="true"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-3 col-lg-6 col-md-12">
<!-- START card-->
<div class="card bg-purple-light pt-2 b0">
<div class="px-2">
<em class="icon-bubbles fa-lg float-right"></em>
<div class="h4 mt-0" id="m_ts">--</div>
<div class="text-uppercase" style="padding-bottom: 10px;font-weight:bold;font-size: 12px">Target Sets</div>
</div>
<div data-sparkline="" data-type="line" data-width="100%" data-height="75px" data-line-color="#23b7e5" data-chart-range-min="0"
data-fill-color="#23b7e5" data-spot-color="#23b7e5" data-min-spot-color="#23b7e5"
data-max-spot-color="#23b7e5" data-highlight-spot-color="#23b7e5" data-highlight-line-color="#23b7e5"
data-values="4,5,3,10,7,15" style="margin-bottom: -2px" data-resize="true"></div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-12">
<!-- START card-->
<div class="card bg-purple-light pt-2 b0">
<div class="px-2">
<em class="icon-bubbles fa-lg float-right"></em>
<div class="h4 mt-0">02</div>
<div class="text-uppercase" style="padding-bottom: 10px;font-weight:bold;font-size: 12px">Actual Sets</div>
</div>
<div data-sparkline="" data-type="line" data-width="100%" data-height="75px" data-line-color="#23b7e5" data-chart-range-min="0"
data-fill-color="#23b7e5" data-spot-color="#23b7e5" data-min-spot-color="#23b7e5"
data-max-spot-color="#23b7e5" data-highlight-spot-color="#23b7e5" data-highlight-line-color="#23b7e5"
data-values="4,5,3,10,7,15" style="margin-bottom: -2px" data-resize="true"></div>
</div>
</div>
</div>
</div>
<!-- </div> -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="modal-footer" id="ignore1">
<button class="btn btn-secondary" type="button" data-dismiss="modal" style="margin-left:40px">Close</button>
<button class="btn btn-primary" type="button" id="toPdf">Export To Pdf</button>
</div>
</div>
</div>
</div>
</div>
这是js代码
var doc = new jsPDF('p', 'pt', 'a4');
var elementHandler = {
'#ignore1': function (element, renderer) {
return true;
}
};
$('#toPdf').click(function () {
doc.addHTML($('#content'), {
'elementHandlers': elementHandler
}, function () {
doc.save('sample-file.pdf');
});
});
除了页脚和页眉外，我正在导出整个模态.我的情态就是这样
I am exporting whole modal except footer and header. My modal is like this
但是当我将其导出为pdf时，它会像这样导出
But when i am exporting it as a pdf wo it exports like this
我正在使用jspdf.我给整个模态内容一个id，该id传入jspdf对象以创建pdf，但是当我导出时，它切掉了上面的3个蓝色小部件.
I am using jspdf. I give the whole modal content an id which is passing in jspdf object to create pdf but when i am exporting so it is cutting up the upper 3 blue widgets.
推荐答案
尝试使用.html()而不是.addHtml().要忽略div，请使用data-html2canvas-ignore="true".
Try to use .html() instead of .addHtml(). To ignore a div, use data-html2canvas-ignore="true".
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"
integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
function download() {
let doc = new jsPDF('p', 'pt', 'a4');
doc.html(document.getElementById('content'), {
callback: function () {
// doc.save('test.pdf');
window.open(doc.output('bloburl')); // use this to debug
}
});
}
</script>
这篇关于给定目标整个div是否不使用jspdf导出为pdf?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
