使用PrintJs打印ElementUI中的Radio和Checkbox样式显示异常
内容提要
在PrintJs中，打印选中样式的问题源于ElementUI的默认样式。可以通过设置scanStyles: false禁用样式，或使用原生标签重新绘制Radio和Checkbox元素。建议在打印前切换元素显示，以确保打印效果良好。
延伸解读
问题根源：ElementUI样式与打印的冲突
文章指出，PrintJs无法打印Radio和Checkbox的选中样式，根本原因在于ElementUI的默认样式。这些样式可能依赖CSS变量或伪元素，在打印时无法正确渲染。因此，直接使用PrintJs打印包含ElementUI表单元素的页面时，会出现选中状态丢失或显示异常。理解这一点有助于选择正确的解决方案。
方案一：禁用样式扫描的适用场景与局限
通过设置scanStyles: false，PrintJs将不加载任何样式，从而避免ElementUI样式干扰。但文章提醒，如果打印内容较多，页面会失去所有样式，变得难以阅读。此外，可能还需添加-webkit-print-color-adjust: exact等CSS来强制打印颜色。因此，此方案仅适用于打印内容少、样式简单的场景。
方案二：原生标签重绘与显示切换
推荐方案是隐藏Element组件，使用原生input和label重新绘制Radio和Checkbox。这需要在打印前切换显示元素，并监听打印对话框关闭事件以恢复原状。文章以Vue2为例，展示了通过v-if控制显示和printJS的onPrintDialogClose回调实现切换。这种方式能保证打印样式正确，但增加了代码复杂度。
实施建议：根据打印内容量选择方案
文章隐含的建议是：若打印内容少且样式简单，可尝试方案一；若打印内容多或对样式要求高，应选择方案二。方案二虽然需要额外处理显示切换，但能确保打印效果良好。开发者需权衡开发成本与打印质量，选择最适合当前项目的方法。
Q&A
为什么在PrintJs中打印ElementUI的Radio和Checkbox样式会异常？
因为PrintJs无法打印选中样式，主要是由于ElementUI的默认样式导致的。
如何解决PrintJs打印时样式不显示的问题？
可以通过设置scanStyles: false来禁用样式，或者使用原生标签重新绘制Radio和Checkbox元素。
在打印内容较多时，应该如何处理ElementUI组件？
建议隐藏Element组件，使用原生标签重新绘制Radio和Checkbox元素，以确保打印效果良好。
如何在打印前切换Radio和Checkbox的显示？
需要在打印和正常浏览时切换显示页面上的Radio和Checkbox元素，并监听打印方法。
使用PrintJs打印时，如何配置打印参数？
可以使用printJS({ documentTitle: '能力评估', printable: 'print-order', type: 'html', maxWidth: '100%', targetStyles: ['*'], scanStyles: false })进行配置。
在PrintJs中，如何确保打印效果良好？
建议在打印前切换元素显示，并使用原生标签重新绘制需要打印的元素。
