joseluisq / printd

Print HTML elements or pages in modern browsers.
MIT License
80 stars 5 forks source link

Print chartjs #1

Closed patogalarzar closed 5 years ago

patogalarzar commented 5 years ago

Hi, I'm trying to print a chart generated with chartjs but the chart doesn't appears in the print.

This what I'm doing

`const doc = new Printd()

const css = cssText: [` body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: 'Segoe UI'; font-size: 14px; } .chartjs-render-monitor { -webkit-animation: chartjs-render-animation 0.001s; animation: chartjs-render-animation 0.001s; } .table { border: none; border-right: solid 1px #C6E2FF; border-collapse: separate; border-spacing: 0; margin-bottom: 15px; } .table thead th { background-color: #ECF5FF; /border: none;/ border-right: solid 1px #C6E2FF; color: #336B6B; padding: 10px; text-align: center; text-shadow: 1px 1px 1px #fff; white-space: nowrap; } .table tbody td { border-bottom: solid 1px #C6E2FF; color: #333; padding: 5px; text-shadow: 1px 1px 1px #fff; white-space: nowrap; }]

const scripts = [ 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js', (() => console.log('Hello from IFrame!'))() ]

doc.print(document.getElementById('printArea'), css, scripts)`

All the rest of the elements shows in the print dialog except for the chart. I'm working with vuejs, with the webpack template.

Hope you can help me.

joseluisq commented 5 years ago

As far as I know print canvas is not possible. but you can convert the canvas into an image before to print. Try to convert canvas into some DataURI and place the value as src of the image, finally just launch the print.