css - 反应如何为不同的组件打印横向/纵向
问题描述
我们的 React 应用程序有大约 10 条不同的路线,我们希望它们都可以打印。我们正在使用 css 打印媒体查询来清理样式以进行打印,并且前端有一个单击时调用的按钮window.print()
。
在 10 条路线中,有 7 个页面看起来更好,landscape
而其他 3 个页面更好portrait
。目前,@page
仅在应用程序的顶级App.scss
文件中设置一次。
应用程序.scss
@page {
size: portrait;
}
@media print and (orientation: portrait) {
.table-cols {
max-width: 50%;
}
.my-selects { display: none; }
.my-print-button { display: none; }
.my-footer { display: none; }
...
}
根据路线,如何(如果有的话)@page { size: portrait }
切换到景观某些路线?也许可以制作一个landscape
类和一个portrait
类,每个类都设置自己的@page
值,然后这些类将用于路由返回的元素?
解决方案
function setPageSize(cssPageSize) {
const style = document.createElement('style');
style.innerHTML = `@page {size: ${cssPageSize}}`;
style.id = 'page-orientation';
document.head.appendChild(style);
}
function PrintIcon({ teamId, orientation = 'portrait' }) {
// Set orientation of page being printed
useEffect(() => {
setPageSize(orientation);
return () => {
const child = document.getElementById('page-orientation');
child.parentNode.removeChild(child);
};
}, [orientation]);
return (
<div className='print-button' onClick={() => window.print()}>
Click to Print
</div>
);
}
export default PrintIcon;
useEffect
调用setPageSize()
手动添加@page
到头部的函数,它的清理函数删除@page
...
推荐阅读
- c# - 安装插件时出现 NopCommerce 4.10 错误
- reactjs - 在同一页面上加载两个 React 实例
- reactjs - CustomizedComponent 未与 redux 连接
- java - 带有虚假用户输入的 Java 测试扫描仪
- common-lisp - windows环境下加载hunchentoot时出错
- google-apps-script - 特定订单谷歌脚本(range.sort)
- javascript - 将 env 变量暴露给 VueJs、WebPack 中的其他 js 文件
- logstash - 使用 logstash 从 Elastic Search 中删除旧文档
- django - 如何手动增加(对象 ID)PostgreSQL 自动增量(xx_xx_pkey)?
- solidity - ERC20、ERC223、ERC721和ERC948的区别?