SAPUI5 Экспорт диаграммы Ганта в PDF или печать всей диаграммы

Мне нужно создать кнопку «Экспорт в PDF» и перенести все данные диаграммы Ганта в PDF с тем же макетом. Может ли кто-нибудь помочь мне идеями или источниками?

В качестве альтернативы можно распечатать всю страницу, а не распечатать экран.

Спасибо.

Это может вам помочь: stackoverflow.com/questions/31284742/…stackoverflow.com/questions/742271/…

— 17.12.2018 15:27

javascript html ide sapui5

17.12.2018 15:19

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

928

Ответы 2

Вы можете использовать jsPDF, это не идеально, но это может быть то, что вам нужно.

Ниже приведен фрагмент того, как реализовать jsPDF с диаграммой vizframe или использовать с Приложение SAP.

Вам нужно будет поиграть с высотой / шириной представления диаграммы и настройками jsPDF в соответствии с вашими предпочтениями.

var doc = new jsPDF('p', 'mm');
$("#print_btn").click(() => {
  html2canvas(document.body, {
    onrendered: function(canvas) {

      var img = canvas.toDataURL("image/jpg");
      doc.addImage(img, 'JPEG', 0, 0);

      doc.save("Chart.pdf");
    }

  })
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<div id = "UIComp_0" class = "v-info" aria-labelledby = "UIComp_0-title" tabindex = "0" style = "height: 230px; width: 380px; position: relative; font-size: 10px; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><svg class = "v-m-root" focusable = "false" tabIndex = "-1" width = "100%" height = "100%" style = "left: 0px; top: 0px; height: 100%; width: 100%; display: block; cursor: default;"><defs></defs><g class = "v-m-desc-title"><title id = "UIComp_0-title">An Interactive Column Chart </title></g><g class = "v-m-action-layer-group"></g><g class = "v-m-decoration-layer-group"></g><g class = "v-m-background"><rect class = "v-background-body viz-plot-background v-morphable-background" x = "0" y = "0" width = "380" height = "230" style = "fill:#ffffff"></rect></g><g class = "v-m-title" transform = "translate(62.34765625, 16)"></g><g class = "v-m-legendGroup" transform = "translate(16, 214)" role = "listbox"><g class = "v-m-legend" transform = "translate(0,0)"><rect class = "v-bound" width = "0" height = "0" visibility = "hidden"></rect></g></g><g class = "v-m-main" transform = "translate(16, 16)"><g class = "v-m-plot" transform = "translate(46.34765625, 0)"><rect class = "v-background-body viz-plot-background v-morphable-background" x = "0" y = "0" width = "301.65234375" height = "130.6" style = "fill:#ffffff"></rect><clipPath id = "plot_main_clipPath_246d5cd1-5ec9-41a1-b6bd-91685857ac7e"><rect y = "-1" width = "302.65234375" height = "131.6"></rect></clipPath><rect class = "v-plot-bound v-bound v-zoom-plot" width = "301.65234375" height = "130.6" fill = "transparent"></rect><g clip-path = "url(#plot_main_clipPath_246d5cd1-5ec9-41a1-b6bd-91685857ac7e)"><g class = "v-plot-main" role = "list" transform = "translate(0, 0)"><g class = "v-gridline-group"><g class = "v-gridline" stroke = "#e5e5e5" stroke-width = "1" shape-rendering = "crispEdges"><line class = "v-gridline-mainline" x1 = "0" y1 = "130.6" x2 = "301.65234375" y2 = "130.6"></line></g><g class = "v-gridline" stroke = "#e5e5e5" stroke-width = "1" shape-rendering = "crispEdges"><line class = "v-gridline-mainline" x1 = "0" y1 = "97.94999999999999" x2 = "301.65234375" y2 = "97.94999999999999"></line></g><g class = "v-gridline" stroke = "#e5e5e5" stroke-width = "1" shape-rendering = "crispEdges"><line class = "v-gridline-mainline" x1 = "0" y1 = "65.3" x2 = "301.65234375" y2 = "65.3"></line></g><g class = "v-gridline" stroke = "#e5e5e5" stroke-width = "1" shape-rendering = "crispEdges"><line class = "v-gridline-mainline" x1 = "0" y1 = "32.650000000000006" x2 = "301.65234375" y2 = "32.650000000000006"></line></g><g class = "v-gridline" stroke = "#e5e5e5" stroke-width = "1" shape-rendering = "crispEdges"><line class = "v-gridline-mainline" x1 = "0" y1 = "0" x2 = "301.65234375" y2 = "0"></line></g></g><g class = "v-datapoint-group"><g><path d = "M102.82617187499999,130.6L102.82617187499999,8.1625L198.826171875,8.1625L198.826171875,130.6" fill = "none" stroke-linejoin = "round" stroke = "#5899da" stroke-width = "1" class = "v-bar-series-path" display = "none"></path><g data-id = "0" data-datapoint-id = "1" class = "v-datapoint v-morphable-datapoint v-datapoint-default" transform = "translate(102.82617187499999, 8.1625)" fill-opacity = "1"><rect width = "96.00000000000003" height = "122.4375" fill = "#5899da" stroke = "#ffffff" stroke-width = "1px" stroke-opacity = "1"></rect></g></g></g></g></g><g class = "v-referenceline-group" clip-path = "url(#plot_main_clipPath_246d5cd1-5ec9-41a1-b6bd-91685857ac7e)"><g class = "v-referenceline-labels-group"></g></g></g><g class = "v-m-categoryAxis v-m-xAxis" transform = "translate(46.34765625, 130.6)" role = "listbox"><rect class = "v-bound" width = "301.65234375" height = "59.4" fill = "transparent"></rect><g class = "v-axis"><g class = "v-m-axisScrollbar" transform = "translate(0,25.4)"><g><rect class = "v-m-scrollbarTrack" visibility = "hidden" fill = "#f7f7f7" stroke-width = "0" stroke = "#ffffff" width = "301.65234375" height = "12"></rect><rect class = "v-m-scrollbarThumb" visibility = "hidden" fill = "#e6e6e6" width = "301.65234375" height = "12" transform = "translate(0, 0)"></rect></g></g><g class = "v-m-axisTitle" transform = "translate(0,45.4)"><g class = "v-title viz-axis-title" fill = "#000000" font-size = "12px" font-weight = "regular" font-family = "Arial, Helvetica, sans-serif" letter-spacing = "0.5px" font-style = "normal"><text dominant-baseline = "auto" text-anchor = "start" x = "104.654296875" y = "11">Chart Print PDF</text></g></g><g class = "v-m-axisBody" transform = "translate(0,0)" clip-path = "url(#clip-path-bdc7fe18-34f8-4cca-8b3d-55fdc0a646da)"><clipPath class = "v-clippath" id = "clip-path-bdc7fe18-34f8-4cca-8b3d-55fdc0a646da"><rect x = "-1" y = "-1" width = "303.65234375" height = "27.4"></rect></clipPath><g class = "v-line-group"><line class = "v-valueaxisline v-line" shape-rendering = "crispEdges" stroke = "#cccccc" stroke-width = "1" x1 = "-0.5" y1 = "0" x2 = "302.15234375" y2 = "0" style = "pointer-events: none;"></line></g><g class = "v-label-group"><g class = "v-label v-morphable-label viz-axis-label v-axis-item index_0" fill = "#333333" font-size = "12px" font-weight = "normal" font-family = "Arial, Helvetica, sans-serif" font-style = "normal" categorylabel-id = "0" transform = "translate(0,0)"><rect class = "viz-axis-label-rect" fill = "transparent" x = "1" y = "1" width = "299.65234375" height = "23.4"></rect><g class = "v-axis-label-wrapper"><text x = "122.58691406" y = "17.4" text-anchor = "start">chartValue</text></g></g></g></g></g></g><g class = "v-m-valueAxis v-m-yAxis" transform = "translate(0, 0)"><rect class = "v-bound" width = "46.34765625" height = "130.6" fill = "transparent"></rect><g class = "v-axis"><g class = "v-m-axisTitle" transform = "translate(0,0)"><g class = "v-title viz-axis-title" fill = "#000000" font-size = "12px" font-weight = "regular" font-family = "Arial, Helvetica, sans-serif" letter-spacing = "0.5px" font-style = "normal"><text dominant-baseline = "auto" text-anchor = "start" x = "5.5" y = "65.3" transform = "rotate(-90,11,65.3)">%</text></g></g><g class = "v-m-axisBody" transform = "translate(22,0)"><clipPath class = "v-clippath-labels" id = "clip-path-f85dcd02-8845-4ac0-93d0-591dca6a8166"><rect x = "-1" y = "-11.2" width = "26.34765625" height = "153"></rect></clipPath><rect class = "v-bound" width = "24.34765625" height = "130.6" fill = "transparent"></rect><g clip-path = "url(#clip-path-f85dcd02-8845-4ac0-93d0-591dca6a8166)"><g class = "v-label-group"><g class = "v-label v-morphable-label viz-axis-label" fill = "#707070" font-size = "12px" font-weight = "normal" font-family = "Arial, Helvetica, sans-serif" font-style = "normal"><text text-anchor = "start" x = "6.67382812" y = "134.79999999999998">0</text></g><g class = "v-label v-morphable-label viz-axis-label" fill = "#707070" font-size = "12px" font-weight = "normal" font-family = "Arial, Helvetica, sans-serif" font-style = "normal"><text text-anchor = "start" x = "0" y = "102.14999999999999">20</text></g><g class = "v-label v-morphable-label viz-axis-label" fill = "#707070" font-size = "12px" font-weight = "normal" font-family = "Arial, Helvetica, sans-serif" font-style = "normal"><text text-anchor = "start" x = "0" y = "69.5">40</text></g><g class = "v-label v-morphable-label viz-axis-label" fill = "#707070" font-size = "12px" font-weight = "normal" font-family = "Arial, Helvetica, sans-serif" font-style = "normal"><text text-anchor = "start" x = "0" y = "36.85000000000001">60</text></g><g class = "v-label v-morphable-label viz-axis-label" fill = "#707070" font-size = "12px" font-weight = "normal" font-family = "Arial, Helvetica, sans-serif" font-style = "normal"><text text-anchor = "start" x = "0" y = "4.2">80</text></g></g></g></g></g></g><g class = "v-m-scrollbar" transform = "translate(348, 0)"></g></g></svg>
  <div
    class = "v-m-tooltip-container" actualwidth = "380" actualheight = "230" style = "left: 0px; top: 0px; height: 0px; width: 0px; position: absolute;"></div>
</div>
<button id = "print_btn">Export as PDF</button>

это мой пример

— 19.12.2018 18:16

sapui5.hana.ondemand.com/#/sample/…

— 19.12.2018 18:16

я хочу распечатать все дерево и диаграмму

— 19.12.2018 18:16

18.12.2018 13:10

Вы можете использовать sap.gantt.simple.GanttPrinting Доступно с: 1.66

        controllerName = "sap.gantt.sample.GanttPrinting.Gantt"
        height = "100%"
        xmlns = "sap.gantt.simple"
        xmlns:mvc = "sap.ui.core.mvc"
        xmlns:m = "sap.m">
    <GanttChartContainer id = "ganttContainer">
        <toolbar>
            <ContainerToolbar stepCountOfSlider = "6">
                <m:Button text = "Export to PDF" press = "onExportPDF" />
            </ContainerToolbar>
        </toolbar>
    </GanttChartContainer>
<gnt2:GanttChartWithTable shapeDoubleClick = "onSahpeDblClick" id = "gantt1" ghostAlignment = "Start" adhocLineLayer = "Bottom"> </gnt2:GanttChartWithTable>
</mvc:View>

и в вашем файле контроллера:

onExportPDF: function () {
        var oGantt = this.getView().byId("gantt1");
        var oGanttPrinting = new sap.gantt.simple.GanttPrinting();
        oGanttPrinting.setGanttChart(oGantt);
        oGanttPrinting.open();
        }

где GanttChartContainer id = "ganttContainer"

29.07.2019 19:39