css2pdf xepOnline Cloudformatter：实现元素仅在PDF显示、HTML中隐藏

嘿，我刚好有过使用xepOnline Cloudformatter处理这类需求的经验，给你分享个简单可行的方案！

核心思路是利用CSS的媒体查询，针对屏幕显示和打印（PDF生成）场景分别设置元素的可见性：

1. 先定义一个自定义类（比如onlyprint），默认在网页中隐藏元素：

.onlyprint {
    display: none;
}

2. 再通过@media print规则，指定这个类的元素在打印（也就是Cloudformatter生成PDF的场景）下显示：

@media print {
    .onlyprint {
        display: block; /* 可以根据元素实际类型调整，比如inline、inline-block等 */
        /* 这里还可以补充元素在PDF中需要的样式，比如字体、边距等 */
    }
}

3. 最后把需要仅在PDF中显示的元素加上这个类就可以了：

<div class="onlyprint">这段内容网页上看不到，但会出现在生成的PDF里</div>

原理很简单：xepOnline Cloudformatter生成PDF时会遵循CSS的print媒体规则，而网页端默认使用screen媒体规则，这样就能实现你要的“网页隐藏、PDF显示”的反向效果啦。

内容的提问来源于stack exchange，提问作者bboybeatle