Использование библиотек jsPDF / HTML2Canvas / Chartjs и Bootstrap, как вставлять таблицы и диаграммы в PDF по одной - PullRequest
Новая
       25

Использование библиотек jsPDF / HTML2Canvas / Chartjs и Bootstrap, как вставлять таблицы и диаграммы в PDF по одной

0 голосов
/ 19 мая 2019

Извините, если это кажется немного общим, поскольку я пытался найти множество попыток исправить эту проблему.Я пытаюсь создать PDF-отчет для некоторых статистических данных, используя упомянутые библиотеки, но у меня возникли некоторые проблемы.1) Страница получается «прозрачной» 2) Диаграммы получаются искаженными 3) (с помощью fileSaver) отчет выходит видимым, но для небольших

Я использую html2canvas, чтобы получить изображение, передающее его методу saveAs (fileSaver) в этомпопытка

Самой успешной попыткой была загрузка всего документа в pdf (ниже) с использованием библиотеки fileSaver, но проблема в том, что pdf действительно маленький ИЛИ с использованием jspdf создаю pdf для каждого элемента диаграммы, но я быхотелось бы, чтобы можно было увеличить размер страницы, чтобы таблицы и диаграммы на их собственной странице были четко видны, за исключением двух пончиков, которые, по возможности, находятся на одной странице вместе, не выглядя растянутыми и искаженными. 

<div class="container">
    <div id="tableHolder">
        <table class="table table-dark">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div>
        <div id="outisde" style="width:500px; height:500px">
            <canvas id="myChart"></canvas>
        </div>
    </div>
    <div>
        <div id="outisde2" style="width:500px; height:500px">
            <canvas id="myChart2"></canvas>
        </div>
    </div>
    <div>
        <div id="outisde3" style="width:450px; height:500px; float: left;">
            <canvas id="myChart3"></canvas>
        </div>
        <div id="outisde4" style="width:450px; height:500px; float: left;">
            <canvas id="myChart4"></canvas>
        </div>
    </div>

    <button id="pdf"> PDF </button>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script type="text/javascript" src="./js/html2canvas.js"></script>
<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/5ed507ef8aa53d8ecfea96d96bc7214cd2476fd2/FileSaver.min.js"></script>

$ ('# pdf'). Click (function () {

    html2canvas(document.body, {
        'allowTaint': true,
    }).then(function (canvas) {
        /*document.body.appendChild(canvas)*/
        canvas.toBlob(function (blob) {
            saveAs(blob, "aScreenshot.png");
        }, "image/png", 1);
    })

});

В этом примере Iполучить документ, но он слишком мал, я бы хотел, чтобы каждая диаграмма была на одной странице, а диаграммы не выглядели бы как растянутые. Любой совет / примеры / руководствоЯ ценю.

...