gpt4 book ai didi

css - react 如何为不同的组件打印横向/纵向

转载 作者:行者123 更新时间:2023-12-03 16:58:45 27 4
gpt4 key购买 nike

我们的 React 应用程序有大约 10 个不同的路由,我们希望它们都可以打印。我们正在使用 css 打印媒体查询来清理样式以进行打印,并且前端有一个调用 window.print() 的按钮。单击时。
在这 10 条 route ,有 7 页的页面使用 landscape 看起来更好。而其他 3 个更好,如 portrait .目前,@page仅设置一次,在应用程序的顶级 App.scss文件。
App.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 ...

关于css - react 如何为不同的组件打印横向/纵向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64432552/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com