页面打印

项目场景：
vue项目复杂页面打印

---

问题描述：
页面使用前端框架包含图片表格等，页面打印时出现样式变化，表格展现不全

---

原因分析：

可采用开源vue插件有vue-print-nb，print-js，两者效果都不理想，窗口大小调整时，打印效果就会发生变化，特别是表格展示不全

---

解决方案：

思路一：采用vue-print-nb，将页面展示内容生成图片后再打印出来。

               结果：显示效果很差，线条不清晰

思路二：print-js有更多的参数，调整打印页中的样式达到效果。

const style =
                    '@media print { @page { size:portrait;margin:0 auto;margin-top:10px; } table{width:21cm !important;margin:0 auto !important;} .vxe-table{line-height: 24px;font-size: 12px;}  .vxe-cell{white-space: pre-line; word-break: break-all; padding-left: 5px; padding-right: 5px;} .col--left{line-height: 24px;text-align: left;} .div_title{font-size:30px;} .vxe-table--empty-placeholder,.vxe-table--empty-content,.vxe-table-slots,.vxe-resizable,.vxe-table--header-border-line,.vxe-body--x-space{display:none;}}';

//@page { size:portrait;margin:0 auto;margin-top:10px; }   //size:portrait;// 或landscape   设置横纵向打印

        Print({
                    printable: 'printDiv',  //打印内容id
                    type: 'html',              //打印的类型
                    maxWidth: '100%',  //设置后展示表格所有内容
                    scanStyles: false, //设置为false时，库不会处理应用于正在打印的html的样式
                    targetStyles: ['*'],  //采用页面的所有样式，但实际没有按页面展示渲染
                    style: style, // 定义自己的样式
                })

这样可达到打印自定义样式的效果