【问题标题】:How would one display different text near the footer, based on the page如何根据页面在页脚附近显示不同的文本
【发布时间】:2019-06-05 07:44:27
【问题描述】:

所以我正在尝试创建一个页面,该页面将打印从数据库中检索到的数据。这些表格可以跨越多个页面。所有的表格、分页、布局、页眉和页脚都准备好了,小计功能也准备好了。

我唯一的问题是最终的总位置。

我想要的是一个 3 页长的文档,在页脚级别;在第 1 页和第 2 页“续”,在第 3 页显示最终总数。

目前,我有一个包含全部信息的元素,以及将其放置在我想要的确切位置的 css。但它目前在打印时出现在每一页上。

我查看了打印时获取打印作业的当前页面和最大页面并可以生成“y 的第 x 页”的代码,但我想要一个类似“if-else”的逻辑结构。但是我不知道如何在 css 中执行此操作。

如果我遗漏了什么,请告诉我。

<style>
<!---I know there is a variable structure for CSS but does it require any specific library to be installed?--->

if (currentPage()===maxPage()){//I only want to display the total text on the last page.
     div.total {//the div with the total would be set to none by default
     display:all;
     }
}else{
     div.continue{//the div with the "cont'd" message will be displayed
     display:all;
     }
}


</style>

【问题讨论】:

  • 我认为你不能像那样在 css 中使用 if/else ......你在什么框架内操作?或者你正在使用什么库?你是打印成pdf的吗?你在使用 puppeteer 吗?
  • 我的页面是用php构建的,除了jquery之外没有多少库。但我只是从浏览器打印(右键单击-> 打印,Ctrl+P)。没有按钮等。我并没有真正使用任何框架来说话。只是基本的 HTML。
  • 对于代码中的大部分内容,我只是假设所提议设置的理论逻辑。我只是想找到某种将在打印对话期间触发的代码;检查是否是最后一页,并显示总
    ,否则显示连续
  • 您可以使用 puppeteer 访问该站点并打印每一页。使用 puppeteer,您可以为每个页面添加页脚 afaik github.com/GoogleChrome/puppeteer/blob/v1.3.0/docs/… 您需要编写一个相当基本的 nodejs 脚本来执行此操作
  • Puppeteer 是一个专门用于基于 Chrome/Chromium 的浏览器的 api?还是支持firefox或safari等浏览器?

标签: css printing


【解决方案1】:

CSS 中不存在“if/else”语句。除非您使用 CSS 预处理器,否则无论如何都会产生 CSS 的结果。

如果要引入条件语句,则必须将语句移到 CSS 之外(例如 javascript、php 等)。

我建议你从 PHP 开始你想要的条件语句,因为 PHP 可以与数据库通信并将数据提取到以后可以从 HTML 代码中访问的变量中,从而呈现在 Web 浏览器中。

根据您的描述,您需要存储连接到浏览器会话的变量。您可以通过 PHP 与 [$_POST] 和 [$_SESSION] 交互来做到这一点。

【讨论】:

  • 感谢您的回复,CSS预处理器是什么意思?我真的不知道那是什么?是图书馆吗?它会在打印对话期间触发吗?它会改变打印预览吗?
  • CSS 预处理器是一种软件工具,它引入了多种功能,例如创建变量、嵌套、部分、导入的可能性。最常见的 2 个是 Sass 和 Less。他们确实支持 if 语句,但请注意预处理的结果是纯 CSS(没有 if 语句)。链接到 Sass:sass-lang.com/guide 链接到更少:lesscss.org
  • 不,它不会改变打印预览。听起来你需要将你的需求分解成几个小部分,然后从一个开始,当你控制了一个之后,你就会进入下一个需求,等等。
猜你喜欢
相关资源
最近更新 更多
热门标签