window.print 打印的时候显示页码不显示标题和url链接

yiweiIt

已于 2024-05-23 18:23:22 修改

阅读量2.5k

点赞数 25

文章标签： javascript html 前端

于 2023-11-27 14:17:25 首次发布

本文链接：https://blog.csdn.net/yiweiIt/article/details/134643635

版权

最近做了个需求需要做的是在使用浏览器打印的时候要加上页码比如当前第几页、打印的总页数。但是看了网上很多的方法都是采用
@media print {
/* 添加页脚 */
        @page
                 {
                      /* 在底部居中显示页码 */
                @bottom-center {

content: "Page " counter(page) " of " counter(pages);

}

}
这个方法,但是经过大量的方法实践之后浏览器根本不支持此方法

要实现下方这种显示页码的效果

自然的显示又不影响页面展示的效果费了我九牛二虎之力
最开始的想法是识别高度然后自然根据JS和css配合显示页面的页数以及总页数赋值给新建的标签插入到dom中但是后面发现计算结果根据内容的增多而不准确而且显示的页码标签会遮挡部分内容感觉不够美观
经过几天的苦思冥想找出了一个解决方案
1：首先在浏览器中打印中调用window.print()方法的话要打开更多设置勾选出页眉页脚等内容

2： @media print {

@page {

margin-top: 6mm;

}

设置css的主要原因是我只需要页码不需要页眉信息所以设置外边距之后可以隐藏页眉的内容

3.页脚的内容要保存但是页脚内容左侧会展示当前浏览器的地址链接这时候就要配合JS了，以下代码核心就是不要展示地址于是新开了个页面将浏览器地址栏赋值为空或者‘·’这样打印的时候就不会出现地址栏地址了，但是于此同事页面的样式没有带过去所以将原页面的style里的内容和引用的link内容页一并带过去这样就能保证和原有样式是一样的了

</div>

function printdiv(printpage)

{

var newstr = printpage.innerHTML;

var oldstr = document.body.innerHTML;

document.body.innerHTML = newstr;

var printWindow = window.open('·', '_blank');

var newstr = printpage.innerHTML;

printWindow.document.write('<html><head><title></title>');

var styles = document.head.getElementsByTagName('style');

var links = document.head.getElementsByTagName('link');

// Copy over style elements

for (var i = 0; i < styles.length; i++) {

printWindow.document.write(styles[i].outerHTML);

}

// Copy over link elements (stylesheets)

for (var i = 0; i < links.length; i++) {

printWindow.document.write(links[i].outerHTML);

}

printWindow.document.write('</head><body>');

printWindow.document.write(newstr);

printWindow.document.write('</body></html>');

printWindow.document.close();

printWindow.print();

}

!function () {

$("#print-id").on('click', function () {

var div_print = document.getElementById("print-all");

printdiv(div_print);

});

}();

yiweiIt

关注

25
点赞
踩
32

收藏

觉得还不错? 一键收藏
9
评论
window.print 打印的时候显示页码不显示标题和url链接

3.页脚的内容要保存但是页脚内容左侧会展示当前浏览器的地址链接这时候就要配合JS了，以下代码核心就是不要展示地址于是新开了个页面将浏览器地址栏赋值为空或者‘·’这样打印的时候就不会出现地址栏地址了，但是于此同事页面的样式没有带过去所以将原页面的style里的内容和引用的link内容页一并带过去这样就能保证和原有样式是一样的了。最近做了个需求需要做的是在使用浏览器打印的时候要加上页码比如当前第几页、打印的总页数。/* 在底部居中显示页码 */自然的显示又不影响页面展示的效果费了我九牛二虎之力。
复制链接

扫一扫