Как напечатать диаграмму, вынесенный кодом

Я использую библиотеку ChartJS для создания отчета во время выполнения, и на странице у нас также есть кнопка печати, кнопка печатает Div:Как напечатать диаграмму, вынесенный кодом

<div id="printThis"> 
    <h3 id="titulo_grafica"></h3> 
    <canvas id="graficaMedidas" width="200" height="100"></canvas> 
</div>

Я не думаю, Мне нужно вставить код здесь, чтобы отобразить изображение, но его симпатичную линейную диаграмму.

Javacript это:

document.getElementById("btnPrint").onclick = function() { 
      printElement(document.getElementById("printThis")); 
      printElement(document.getElementById("printThis2"), true, "<hr />"); 
      window.print(); 
     }

источник

2016-11-29 gina

Вы можете использовать любые плагины? – Daerik

В чем же проблема? Это действительно непонятно. – Dekel

yes Я открыт для использования любого плагина, проблема в том, что когда я печатаю страницу char с таблицей html, диаграмма пуста, и я вижу только таблицу html. – gina

html2canvas

Этот скрипт позволяет делать "скриншоты" веб-страниц или частей него, прямо в браузере пользователя. Снимок экрана основан на DOM и поэтому не может быть на 100% точнее реального представления, так как он не делает фактический снимок экрана, но создает скриншот на основе информации, доступной на странице.

jsPDF

HTML5 на стороне клиента решение для создания PDF-файлов. Идеально подходит для событий билетов, отчетов, сертификатов, вы называете это!

FileSaver.js

FileSaver.js реализует SAVEAS() FileSaver интерфейс в браузерах , которые изначально не поддерживают. Существует FileSaver.js demo, что демонстрирует сохранение различных типов носителей.

Объедините все это и используйте jQuery, чтобы связать ваши действия. Это создаст PDF-файл, который можно сохранить, распечатать или просмотреть.

<script src="/path/to/jquery.min.js"></script> 
<script src="/path/to/html2canvas.js"></script> 
<script src="/path/to/jspdf.min.js"></script> 
<script src="/path/to/FileSaver.min.js"></script> 
<script> 
    $('#btnPrint').on('click', function(event) { 
     event.preventDefault(); 
     html2canvas($('#printThis'), { 
      onrendered: function(canvas) { 
       var imgData = canvas.toDataURL('image/jpeg'); 
       var doc = new jsPDF('landscape'); 
       doc.addImage(imgData, 'JPEG', 15, 45, 270, 125); 
       doc.save('download.pdf'); 
       return false; 
      } 
     }); 
    }); 
</script>

Для только печатать только с помощью html2canvas:

<script src="/path/to/jquery.min.js"></script> 
<script src="/path/to/html2canvas.js"></script> 
<script> 
    $('#btnPrint').on('click', function(event) { 
     event.preventDefault(); 
     html2canvas($('#printThis'), { 
      onrendered: function(canvas) { 
       var imgData = canvas.toDataURL('image/jpeg'); 
       var windowContent = '<!DOCTYPE html>'; 
       windowContent += '<html>' 
       windowContent += '<head><title>Print canvas</title></head>'; 
       windowContent += '<body>' 
       windowContent += '<img src="' + imgData + '">'; 
       windowContent += '</body>'; 
       windowContent += '</html>'; 
       var printWin = window.open('', '', 'width=340,height=260'); 
       printWin.document.open(); 
       printWin.document.write(windowContent); 
       printWin.document.close(); 
       printWin.focus(); 
       printWin.print(); 
       printWin.close(); 
       return false; 
      } 
     }); 
    }); 
</script>

Вы могли бы сделать это без использования JQuery или каких-либо плагинов, но вы должны быть ориентированы на холст непосредственно без каких-либо HTML, используя только HTMLCanvasElement.toDataURL() метод:

<script> 
    document.getElementById('btnPrint').onclick = function() { 
     var imgData = document.getElementById('graficaMedidas').toDataURL('image/jpeg'); 
     var windowContent = '<!DOCTYPE html>'; 
     windowContent += '<html>' 
     windowContent += '<head><title>Print canvas</title></head>'; 
     windowContent += '<body>' 
     windowContent += '<img src="' + imgData + '">'; 
     windowContent += '</body>'; 
     windowContent += '</html>'; 
     var printWin = window.open('', '', 'width=340,height=260'); 
     printWin.document.open(); 
     printWin.document.write(windowContent); 
     printWin.document.close(); 
     printWin.focus(); 
     printWin.print(); 
     printWin.close(); 
    } 
</script>

источник

2016-11-29 22:28:32 Daerik

Как напечатать диаграмму, вынесенный кодом

ответ

Смежные вопросы