请给我一个使用printJS库编写且printable只存在一个的多个数据源的打印,最好每页都很好的封上口
时间: 2024-05-01 11:21:34 浏览: 68
Vmail:用vue和electron写的邮件客户端,包含收发信息,通讯录,本地保存等功能
好的,以下是一个使用printJS库编写并且可以打印多个数据源的示例。
首先,我们需要引入printJS库。可以使用以下代码在HTML中引入:
```html
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
```
接下来,我们需要定义我们要打印的数据源。假设我们有两个数据源,分别是`dataSource1`和`dataSource2`。每个数据源都是一个包含多个对象的数组。
接着,我们需要创建一个用于打印的HTML模板。我们可以使用以下代码创建一个简单的模板:
```html
<div class="printable">
<div class="page">
<h1>Data Source 1</h1>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
{{#each dataSource1}}
<tr>
<td>{{this.column1}}</td>
<td>{{this.column2}}</td>
<td>{{this.column3}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<div class="page">
<h1>Data Source 2</h1>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
{{#each dataSource2}}
<tr>
<td>{{this.column1}}</td>
<td>{{this.column2}}</td>
<td>{{this.column3}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
```
注意,我们使用了`{{#each}}`来遍历数据源中的每个对象,并将其渲染到表格中。
最后,我们可以使用以下代码来触发打印:
```javascript
printJS({
printable: 'printable',
type: 'html',
css: 'path/to/your/css/file.css'
});
```
这里,我们将`printable`类作为`printable`选项的值,这样printJS库就会查找所有带有`printable`类的元素,并将其作为可打印的内容。我们还指定了`type`选项为`html`,这意味着我们正在打印HTML内容。最后,我们指定了一个CSS文件,以便在打印时应用样式。
希望这可以帮助到你!如果你有任何其他问题,请随时问我。
阅读全文