请给我一个使用printJS库编写且printable只存在一个数据源,这个数据源中有多个数组的打印,最好每页都很好的封上口
时间: 2024-05-05 16:19:41 浏览: 90
好的,可以尝试使用以下代码实现:
```html
<!-- 引入printJS库 -->
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<button onclick="printData()">打印数据</button>
<script>
function printData() {
// 假设有两个数组 arr1 和 arr2
const arr1 = [1, 2, 3, 4, 5];
const arr2 = ['a', 'b', 'c', 'd', 'e'];
// 将数组拼接成一个数据源 dataSource
const dataSource = arr1.map((item, index) => {
return {
arr1: item,
arr2: arr2[index]
}
})
// 将 dataSource 按照每页显示 5 条的方式切割成多个数组
const chunks = [];
for (let i = 0; i < dataSource.length; i += 5) {
chunks.push(dataSource.slice(i, i + 5));
}
// 生成打印内容
const printContent = chunks.map(chunk => {
return `
<table>
<thead>
<tr>
<th>数组1</th>
<th>数组2</th>
</tr>
</thead>
<tbody>
${chunk.map(data => `
<tr>
<td>${data.arr1}</td>
<td>${data.arr2}</td>
</tr>
`).join('')}
</tbody>
</table>
`;
}).join('<div style="page-break-after: always;"></div>');
// 打印内容
printJS({
printable: printContent,
type: 'html',
css: 'table { border-collapse: collapse; } table, th, td { border: 1px solid black; padding: 5px; }'
});
}
</script>
```
说明:
1. 首先将数组 `arr1` 和 `arr2` 拼接成一个数据源 `dataSource`,其中每个对象包含一个 `arr1` 和一个 `arr2`。
2. 然后将 `dataSource` 按照每页显示 5 条的方式切割成多个数组,并将其存储在 `chunks` 数组中。
3. 接着使用 `chunks` 数组生成打印内容,每个数组对应一张表格,并且通过 CSS 将表格样式设置为边框和内边距。
4. 最后调用 `printJS` 函数,将打印内容传入 `printable` 参数中,并指定 `type` 为 `'html'`,表示传入的是 HTML 字符串。CSS 样式通过 `css` 参数传入。
阅读全文