js，简单的打印例子，自定义换页

已于 2023-07-06 22:39:28 修改
阅读量265 收藏
点赞数
分类专栏： js web前端 文章标签： 前端
于 2021-08-05 15:08:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qaakd/article/details/119418508
版权
js 同时被 2 个专栏收录
83 篇文章 0 订阅
订阅专栏
web前端
53 篇文章 0 订阅
订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>6666</title>
    </head>
    <style>
        .test tr td{padding:10px;}
    </style>
    <body>
        
        <script>
          function printpage() {
            let newstr = document.getElementById("printContent").innerHTML;
            let oldstr = document.body.innerHTML;
            document.body.innerHTML = newstr;
            window.print();
            document.body.innerHTML = oldstr;
            return false;
          }
        </script>
  
  <input type="button" value="打印此页面" οnclick="printpage()" />
  <div id="printContent">
      <div style="text-align: center;margin:15px;">标题</div>
      <table class="test" style="width: 100%;" border="1">

          <tr>
              <td>打印内容</td>
              <td>打印内容</td>
              <td>打印内容</td>
              <td>打印内容</td>
              <td>打印内容</td>
          </tr>

          <tr>
              <td>打印内容</td>
              <td>打印内容</td>
              <td>打印内容</td>
              <td>打印内容</td>
              <td>打印内容</td>
          </tr>

          <tr>
              <td>打印内容</td>
              <td>打印内容</td>
              <td>打印内容</td>
              <td>打印内容</td>
              <td>打印内容</td>
          </tr>

          <tr>
              <td>打印内容</td>
              <td>打印内容</td>
              <td>打印内容</td>
              <td>打印内容</td>
              <td>打印内容</td>
          </tr>
          
          <tr>
                        <td>打印内容</td>
                        <td>打印内容</td>
                        <td>打印内容</td>
                        <td>打印内容</td>
                        <td>打印内容</td>
          </tr>
          
      </table>
      
       <div style="text-align: center;margin:15px;page-break-before: always; page-break-inside: avoid;">标题</div>
      <table class="test" style="width: 100%;" border="1">
      
                <tr>
                    <td>打印内容</td>
                    <td>打印内容</td>
                    <td>打印内容</td>
                    <td>打印内容</td>
                    <td>打印内容</td>
                </tr>
      
                <tr>
                    <td>打印内容</td>
                    <td>打印内容</td>
                    <td>打印内容</td>
                    <td>打印内容</td>
                    <td>打印内容</td>
                </tr>
      
                <tr>
                    <td>打印内容</td>
                    <td>打印内容</td>
                    <td>打印内容</td>
                    <td>打印内容</td>
                    <td>打印内容</td>
                </tr>
      
                <tr>
                    <td>打印内容</td>
                    <td>打印内容</td>
                    <td>打印内容</td>
                    <td>打印内容</td>
                    <td>打印内容</td>
                </tr>
                
                <tr>
                              <td>打印内容</td>
                              <td>打印内容</td>
                              <td>打印内容</td>
                              <td>打印内容</td>
                              <td>打印内容</td>
                </tr>
                
      </table>
      
      
  </div>
 

</body>
</html>

qaakd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js实现打印，可以自动分页！
03-04
js打印,将数据读取到打印页面，用js截取，从而实现打印指定模块！打印的时候如果页面数据过多，打印机可以自动分页打印！我的是hp的打印机，下载的朋友可以试试！注意，本人声明：这个并不是针对于打印分页而写，只是普通的js打印！
js页面打印换页
iron_14的博客
06-11 873
display:inline-table;page-break-after: always; page-break-inside: avoid;" <table> <tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;"> <td></td> <td></td> ... </tr&gt.
来点基础的吧，JavaScript、JSP怎么打印输出，方便调试
最新发布
luohaitao的专栏
03-09 1492
想打印自己代码的变量查看值是否争取，但又不知道怎么打印，打印到哪儿的，尤其是新手朋友有点模糊的，可以看看这篇文章参考一下，能快速有个诊断和判断的依据。
打印网页去掉页眉和页脚，js打印横向，打印表格自动换页
qq_38402659的博客
08-07 756
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="X-UA-Compatib...
js打印窗口内容并当窗口内容较长时自动分页
weixin_30553837的博客
09-28 929
项目环境Angular： 方法1、window.print() HTML页面上的代码： <div id="tenementBillTable" class="dialog-content"> <div *ngFor="let item of dataList" class="table-container"> <div ...
前端实现分页打印(一)
我是渣渣
12-16 4690
实现页面为结算单，也页面由固定头部，订单信息，产品列表，金额汇总，订单明细 其中产品列表需要动态计算分压，订单明细由于存在多个子单，订单收费项目可配置化，导致也存在多个分页需要处理
打印插件jquery.printPage.js
12-01
一个很实用的打印插件，配合jquery-1.4.4.min.js一起使用，具体使用方式看教程。
JavaScript实现页面的动态切换，比如通过点击按钮或链接来切换页面
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-31 299
JavaScript实现页面的动态切换，比如通过点击按钮或链接来切换页面
使用print.js进行分页打印
qq_41834729的博客
04-22 6937
如何进行表格大量数据的分页打印 print.js官网 目的：实现大量数据的分页打印 探究过程：几种流行的打印插件， vue-print-nb vue-easy-print 都没有实现自动分页打印功能(网上讲解混乱，有的说可以自动分页，有的说不能，导致在这两个插件上耗费很长时间也没实现功能) 最后选取了print-js， 操作过程 使用 npm 安装： npm install print-js --save html <div id="print-box" style={{ fontS
前端实现打印功能，并且数据超出自动分页
qq_59728477的博客
06-14 1347
由于业务需要，想在系统内实现打印功能，并且内容过多要自动分页，如下：要实现这种效果：废话少说，直接上代码：随后在需要使用的页面引入：该方法接收两个参数为标签的内容，可以使用或者来获取。为打印方向，分为和。
vue print-js 解决 打印分页问题
weixin_42393719的博客
04-13 9244
前后尝试了 两个插件vue-print-nb、vue-easy-print ，都不行。最后选择了 print-js。 不多说了，贴整个代码 <template> <div class="table-data"> <div class="search-box"> <el-row> <el-col :span="24"&g...
js自定义区域打印
11-25
js自定义区域打印，实现自定义区域打印，js调用打印机实现打印
swiper自定义分页器的样式
01-21
js主要代码 pagination: { // 自定义分页器的类名----必填项 el: '.custom-pagination', // 是否可点击----必填项 clickable: true, // 分页的类型是自定义的----必填项 type: 'custom', // 自定义特殊类型...
JS简单实现自定义右键菜单实例
10-19
本篇文章主要介绍了JS简单实现自定义右键菜单实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript打印网页指定区域的例子
10-26
主要介绍了JavaScript打印网页指定区域的例子,需要的朋友可以参考下
JS自定义对象创建与简单使用方法示例
11-28
本文实例讲述了JS自定义对象创建与简单使用方法。分享给大家供大家参考，具体如下： <html> <head> <title>js自定义函数</title> <meta charset="UTF-8"/> [removed] //创建...
js实现拖动div元素（js实现元素拖动）
热门推荐
Web前端工程师
10-17 1万+
注意：jquery.min.js请自行添加（没有可以百度下载）--><script src="../jquery.min.js"></script> 效果图： <!doctype html> <html> <head> <meta charset="utf-8"> <title>JS拖拽div<...
Js日期加减(天数)，时间加减，日期运算
Web前端工程师
01-20 6882
根据传入的日期做加减法计算，整数为加法，负数为减法，但是是天。 num可传入: 1,2,3,-1,-2,-3等，默认是加一天；date可传入: 2017-01-01格式的，不传的话默认是当天日期。 function dateChange(num = 1,date = false) { 　　if (!date) { 　　　　date = new Date();//没有传入值时,默认是当前日期 　　　　date = date.getFullYear() + '-' + (date.getMonth()
js导出excel（超简单）
Web前端工程师
08-19 6170
代码如下复制即可： <html> <head> <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p> <button onclick='tableToExcel()'>导出</button> </head> <body> <script> function tableToExcel(...
js 打印 自动换页
05-27
在 JavaScript 中实现自动分页打印的方法，可以使用 `window.print()` 函数结合 `@media print` 媒体查询和 CSS 的 `page-break-before` 或者 `page-break-after` 属性。具体步骤如下： 1. 在 HTML 中，将需要打印...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qaakd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值