joseluisq/printd

Print chartjs

patogalarzar opened this issue · 1 comments

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.

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.