JavaScript 网页打印预览，图片跨页分割

最新推荐文章于 2022-08-28 17:11:22 发布

等下吃什么？

最新推荐文章于 2022-08-28 17:11:22 发布

阅读量1k

点赞数 1

分类专栏： JavaScript | JQuery 文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_44240581/article/details/114921859

版权

JavaScript | JQuery 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

开始时是这样的，打印的控件是用iframe写的，图片用js一张张插入到div中，遇到的问题是长图片跨页分割，短图片挤在一页
在这里插入图片描述

解决方法

// 插入图片方法
function addImg() {
        var imgDiv = document.getElementById('imgDiv');
        imgDiv.setAttribute('style', 'overflow:hidden');
        for (var i = 0; i < imgArray.length; i++) {
          var imgEle = document.createElement('IMG');
          imgEle.style.cssText = 'width: 100%; max-height: 1000px; display: block;  page-break-after: always';
          imgEle.setAttribute('id', 'IMG'+i);
          imgDiv.appendChild(imgEle);
        }
        setTimeout(function () {
          for (var i = 0; i < imgArray.length; i++) {
            var imgEle = document.getElementById('IMG'+i);
            imgEle.onload = imgOnLoad;
            imgEle.setAttribute('src', imgArray[i]);
          }
        }, 100);
      }

主要代码

imgEle.style.cssText = 'width: 100%; max-height: 1000px; display: block;  page-break-after: always';

width: 100%：设置图片宽度平铺占满
max-height: 1000px：最高高度为纸张高度
display: block：设置图片为块级元素
page-break-after: always：在此标签后进行分页标签分页

更多内容参考：JavaScript 页面打印，预览，设置，分页

最终效果

一张图片占一页
在这里插入图片描述