我想使用开放标准来打印报告,该报告的每页末尾都必须有小计。
螺纹XSL-FO,CSS3,而不是CSS2的用于创建分页文件如PDF?建议将CSS3与HTML结合使用。
现在,我遇到的问题是使用HTML或CSS或JS确定A4页面的填充位置,以便出现分页符。
有CSS分页符选择器:
page-break-before: always | avoid — always/avoid page breaks before the item
page-break-after: always | avoid — always/avoid page breaks after the item
page-break-inside: always | avoid — always/avoid page breaks in the middle of the item
Run Code Online (Sandbox Code Playgroud)
但是这些对于每个页面上的小计而言并不是真正有用的,因为我不知道页面何时填充,因此我可以在其中放置这样的CSS的标签。
HTML TABLE标签支持某种形式的表头和表尾,听起来很有希望:
可以分别使用THEAD,TFOOT和TBODY元素将表行分组为表头,表脚和一个或多个表主体部分。这种划分使用户代理能够独立于桌子的头和脚来支持桌子主体的滚动。当打印长表时,可以在包含表数据的每一页上重复表的头和脚信息。
<TABLE>
<THEAD>
<TR> ...header information...
</THEAD>
<TFOOT>
<TR> ...footer information...
</TFOOT>
<TBODY>
<TR> ...first row of block one data...
<TR> ...second row of block one data...
</TBODY>
<TBODY>
<TR> ...first row of block two …Run Code Online (Sandbox Code Playgroud) 这是一个带有反应示例的工作调查.js:http ://plnkr.co/edit/qXdeQa6x2FHRg0YrOlPL?p=preview
我的 html 也<script src="https://unpkg.com/survey-react"></script>包含在内。
在我的 main.jsx 中,我正在调用将基于 json 文件和多个反应组件填充的 div 的渲染,在我的 json 数组中,我也有一个用于survey.js 的问题 json 对象。我想要实现的是在解析数组时达到问题对象时呈现调查。
在我的顶级组件中,我有这样的要求:
if (section.hasOwnProperty('questions')){
return <Questions key={i+"questions"} id={i+"questions"} questions={section.questions} />;
Run Code Online (Sandbox Code Playgroud)
Questions.jsx:
var React = require('react');
var ReactDOM = require('react-dom');
var Survey = require('survey-react');
var Questions = React.createClass({
render: function() {
Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
window[this.props.id] = new Survey.Model( this.props.questions );
var questionid = this.props.id;
var idi = this.props.id.replace("questions","");
return (
<dt>
<div id={this.props.id}></div>
</div>
</dt>
);
} …Run Code Online (Sandbox Code Playgroud)