|
1 | 1 | <template> |
2 | | - <div class="card material-table"> |
| 2 | + <div class="card material-table" ref="table"> |
3 | 3 | <div class="table-header"> |
4 | 4 | <span class="table-title">{{ title }}</span> |
5 | 5 | <div class="actions"> |
|
334 | 334 | }, |
335 | 335 |
|
336 | 336 | print() { |
337 | | - let win = window.open(''); |
338 | | - win.document.write(this.renderTable()); |
| 337 | + const clonedTable = this.$refs.table.cloneNode(true); |
| 338 | + this.synchronizeCssStyles(this.$refs.table, clonedTable, true); |
| 339 | +
|
| 340 | + clonedTable.style.maxWidth = '100%'; |
| 341 | + clonedTable.style.boxShadow = '0px 0px 0px 1px rgba(0,0,0,0.2)'; |
| 342 | + clonedTable.style.margin = '8px auto'; |
| 343 | + clonedTable.querySelector('.actions').remove(); |
| 344 | + clonedTable.querySelector('.material-pagination').remove(); |
| 345 | + clonedTable.querySelector('.datatable-length').remove(); |
| 346 | +
|
| 347 | + clonedTable.querySelectorAll('button').forEach(n => n.remove()); |
| 348 | +
|
| 349 | + let win = window.open('', ''); |
| 350 | +
|
| 351 | +
|
| 352 | + win.document.body.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif'; |
| 353 | + win.document.body.innerHTML = (clonedTable.outerHTML); |
| 354 | +
|
339 | 355 | win.print(); |
| 356 | +
|
340 | 357 | win.close(); |
341 | 358 | }, |
342 | 359 |
|
|
393 | 410 | else |
394 | 411 | return undefined; |
395 | 412 | }, |
| 413 | +
|
| 414 | + /* https://codebottle.io/s/31b70f5391 |
| 415 | + * |
| 416 | + * @author: Luigi D'Amico (www.8bitplatoon.com) |
| 417 | + */ |
| 418 | + synchronizeCssStyles(src, destination, recursively) { |
| 419 | + destination.style.cssText = this.getComputedStyleCssText(src); |
| 420 | +
|
| 421 | + if (recursively) { |
| 422 | + const vSrcElements = src.getElementsByTagName('*'); |
| 423 | + const vDstElements = destination.getElementsByTagName('*'); |
| 424 | +
|
| 425 | + for (var i = vSrcElements.length; i--;) { |
| 426 | + const vSrcElement = vSrcElements[i]; |
| 427 | + const vDstElement = vDstElements[i]; |
| 428 | + vDstElement.style.cssText = this.getComputedStyleCssText(vSrcElement); |
| 429 | + } |
| 430 | + } |
| 431 | + }, |
| 432 | +
|
| 433 | + // https://gist.github.com/johnkpaul/1754808 |
| 434 | + // |
| 435 | + // Please delete Firefox. |
| 436 | + getComputedStyleCssText(element) { |
| 437 | + const cssObject = window.getComputedStyle(element); |
| 438 | + const cssAccumulator = []; |
| 439 | +
|
| 440 | + if (cssObject.cssText !== ''){ |
| 441 | + return cssObject.cssText; |
| 442 | + } |
| 443 | +
|
| 444 | + for (let prop in cssObject){ |
| 445 | + if (typeof cssObject[prop] === 'string'){ |
| 446 | + cssAccumulator.push(prop + ' : ' + cssObject[prop]); |
| 447 | + } |
| 448 | + } |
| 449 | +
|
| 450 | + return cssAccumulator.join('; '); |
| 451 | + }, |
396 | 452 | }, |
397 | 453 |
|
398 | 454 | computed: { |
|
0 commit comments