堆棧內存溢出
  簡體   English   中英

給定目標整個div是否不使用jspdf導出為pdf？

[英]Given targeted whole div is not exporting as a pdf using jspdf?

 原文  2019-01-08 07:24:35  9   1    javascript/ html/ jspdf

問題描述

我正在將bootstrap modal導出為pdf。 這是我的HTML代碼 

 <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">&times;</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');
        });
    });

我正在導出除頁腳和頁眉以外的整個模式。 我的情態就是這樣 在此處輸入圖片說明

但是當我將其導出為pdf時，它會像這樣導出 在此處輸入圖片說明

我正在使用jspdf。 我給整個模態內容一個id，該id傳入jspdf對象以創建pdf，但是當我導出時，它切掉了上面的3個藍色小部件。

1 個解決方案

解決方案1
 0 已采納  

嘗試使用.html()而不是.addHtml() 。 要忽略div，請使用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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用jsPDF將HTML輸入值導出為PDF 使用jsPDf將網頁導出為PDF 下載HTML <div> 使用jsPDF轉換為pdf 使用jspdf創建具有Div邊框的Pdf 使用 jsPDF 將隱藏的 div 導出為 PDF 使用jsPDF通過jquery生成div的PDF 使用jsPdf從div創建pdf 在angular2項目中使用jspdf導出動態生成的div的問題 使用JSPdf生成將整個html頁面導出為pdf Jspdf（imgage to pdf）不將整個圖像轉換為 pdf
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM