开始时是这样的，打印的控件是用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 页面打印，预览，设置，分页

最终效果

一张图片占一页

JavaScript 网页打印预览，图片跨页分割相关推荐

网页打印预览为空白页，解决！！
这种情况,多半是由于保护模式下 %Temp%\Low 文件夹工作不正常引起的(被误删除.移位等等). 这里给了两种解决方法: 方法一:IE 重置,直接还原为厂商默认设置.这个最是简单省事了!具体步骤, ...
excel打印预览在哪里_在excel表格的打印预览界面调整页边距
我们一般在打印excel表格之前都会查看一下打印预览,看看哪里有出错的问题没有,我们在excel打印预览里面如果看到页边距不合适,那么我们可以在excel表格的打印预览界面调整页边距,具体的调整页边距 ...
WebBrowser 打印设置，打印预览，去页眉和页脚
WebBrowser是IE内置的浏览器控件,无需用户下载. 一.WebBrowser控件 <object ID='WebBrowser' WIDTH=0 HEIGHT=0 CLASSID='CL ...
html打印预览出现重叠,html – 打印预览在每页上重复tfoot
我的问题是,我有两个不同的html文件,其中包含一个包含theader,tfooter和tbody的表. 第一个是我自己创建的测试原因,它看起来像这样: The Invoice table.invoi ...
excel 打印，打印预览每一页只有一个单元格的问题
今天做了个excel报价单,但是打印预览的时候发现有问题,并不是原来的那种打印在一张纸上,而是分散打印在几十张纸上,并且每张纸上只有一个单元格的内容,如下图: 怎么 ...
明明只有一页内容，但打印预览有两页，多出一个空白页。
https://bbs.fanruan.com/wenda/question/108965.html 1.隐藏行列 2.调整行高,列宽 3.页面设置 ->选择预定义的纸张
网页中JS实现（调用）打印预览功能
近期的项目中需要在页面中实现打印预览功能--点击网页中的"打印"(Print),弹出打印预览窗口,点击窗口页面中的"开始打印"(Print),则出现浏览器的打印 ...
网页打印问题，打印设置，打印预览，打印分页，纵打，横打及页面的边距
1.控制"纵打". 横打"和"页面的边距 (1) <object id="factory" style="display ...
在网页中调用打印预览及打印设置
在网页中调用打印预览及打印设置以下内容为程序代码: <OBJECT id=WB classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 heig ...

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

解决方法

最终效果

JavaScript 网页打印预览，图片跨页分割相关推荐

最新文章

热门文章