媒体查询 火狐浏览器input有缓存 前端批量打印表格 CSS3 icon旋转180度 icon旋转180度 img标签设置图片居中

前端批量打印表格

首页 > 前端开发 > Html/Css 更新日期:2022-02-25 11:11:24

思路

1、写一个表格,设一堆多选框

2、选中多个多选框

3、创建一个按钮,点击跳转新页面。URL携带批量选中的参数。

4、新页面:

4-1、页面内容如下:

<style media=”print”></style> 以及 样式属性page-break-after: always; 为分页符。可在打印时,将多个表格,放在多个页面。

<!DOCTYPE html>
<html>
<head>
    <title>分页demo</title>
    <meta charset="utf-8" />
    <!--media=print  分页属性-->
    <style media="print">
        .PageNext{
            page-break-after: always;
        }
    </style>
</head>
<body>
    <img src="1.png" />
    <!--分页符-->
    <div class="PageNext"></div>
    <!--分页符-->
    <img src="1.png" />
    <!--分页符-->
    <div class="PageNext"></div>
    <!--分页符-->
    <img src="1.png" />
</body>
</html>

4-2、获取URL携带的参数。

4-3、ajax请求,用参数向后端请求数据。

4-4、拿到后台传回来的数据之后,利用循环等,创建DOM,插入到页面。

5、使用浏览器自带打印,即可实现批量打印表格。


标题导航