【解决：vue的打印功能window.print 会多出一页空白页】

最新推荐文章于 2025-04-23 14:09:11 发布

li@h

最新推荐文章于 2025-04-23 14:09:11 发布

阅读量4.4k

点赞数 11

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_49066399/article/details/134685282

版权

本文介绍了如何在HTML中使用@mediaprint规则来调整打印页的样式，如自适应高度、去除背景颜色和边距，以实现更好的打印体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在打印页界面加上以下样式

<style media="print">
  @media print {
   html {
     height: auto;
     /* background-color: #ffffff; */
     margin: 0px;
   }
   body {
     /* border: solid 1px #ffffff; */
     /* margin: 10mm 15mm 10mm 15mm; */
   }
  }
</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

li@h

关注关注

11
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

王二红

12-21

6016

vue2，区域打印，前端页面局部转pdf，页面局部打印预览，vue如何实现指定区域打印及导出pdf，只打印一小部分并非全部，指定区域范围内导出生成PDF文件，打印div指定区域内容并保留css样式，可以预览打印机和下载pdf文件，打印指定DOM元素内的内容，vue网页局部打印不全，打印插件Print.js，vuejspdfhtml2canvas，自定义选中页面内容导出为pdf文件，打印功能内容显示不完整，内容显示不全，表格打印不全的问题，空白页，指定div页面转为pdf文件，解决页面样式不出现或者tab

Vue前端使用Window.print打印页面，能根据表格数量分页，空白页问题解决（一看就懂）

qq_52753722的博客

11-15

2466

windows.print()打印

1 条评论您还未登录，请先登录后发表或查看评论

window.print打印总是多出一页空白页

m0_46423771的博客

06-19

1307

也没有设置打印页面的高度，不存在高度导致出现第二页空白，不符合。图片高度设置太高，导致出现第二页空白，不符合。打印页面的第一个标签不是h系列，不符合。最后发现是这个，设置之后就好了。在CSDN用找了半天答案，

window.print() 前端实现网页打印详解

最新发布

有问题可关注公众号：前端研究院后台输入问题回复

04-23

368

前言print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容，我们可以在MDN上查看到相关的简单介绍。一、print()方法print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.execCommand('print') 也可以达到同样的效果。默认打印页面中body里的所有内容。

window.print()方法实现打印功能，多出一张空白页

wangzhe123_的博客

08-23

5062

window.print()方法实现打印，多出一张空白页

python教程（四）之字典（3.字典格式）

由浅入深？

05-20

515

这个标题的理解应该是用字符串格式的方法设置字典 a={"bob":"friend","charly":"friend","herry":"normal","hermione":"girlfriend"} print("hermione is my {hermione}".format_map(a)) #hermione is my girlfriend #format_map是字典特有的格式设置方法，非常便利，下面再来一个例子 b=''' <html> <head> &

vue-print-nb打印预览时多一张空白页

weixin_42234899的博客

05-11

2558

vue打印多出空白页

解决vue-print-nb打印时多出一页空白，vue-print-nb打印有空白页

qq_51055690的博客

04-16

4566

vue实现打印功能（vue-print-nb），解决vue-print-nb每次打印都会多出一张空白页，打印多一张空白

Vue使用PrintJS实现页面打印功能

m0_72416767的博客

10-26

5169

收到一个需求,要求实现拼接成表格并能一键回填数据并能打印成A4大小(或者生成pdf)的功能。实际上回填数据以及拼接部分都很简单,稍微陌生的就是调用浏览器打印功能并将页面内容变成pdf并打印。然后百度了一下发现百度上给出的解决方案并不够具体,很容易踩坑出现各种奇怪的错误,于是就将本人的踩坑解决方案以及思路都记录下来。

window.print()打印表格并且分页时动态添加表头

weixin_54362826的博客

10-03

1786

方法一：获取当前表格内容高度，达到某一值后分页（失败）通过 offsetHeighet 获取到元素高度 let arr = document.getElementsByClassName("bodyDetail") let heightNum=0; //累加的高度 let onePage=1300; //第一页的高度 for(let i in arr){ heightNum+=arr[i].offsetHeight if(heightNum>onePage){ this.thead[i]=true;

vue print打印多出一页

01-07

### Vue Print 打印多出一页的解决方案在处理Vue项目中的打印功能时，遇到打印区域高度不确定而导致多余空白页的情况较为常见。对于票据页面这种需要遍历生成的内容，设置固定的打印区域高度显然不可取。为了...

【利用printJS + html2canvas实现页面打印的解决方案（解决第一页空白问题）】

siv2333的博客

10-25

818

利用printJS + html2canvas来实现页面打印的解决方案 (解决第一页空白问题)

使用vue3-print-nb打印时，出现多了一页空白页、a标签跳转

hyy_20021212的博客

08-07

1362

在写项目中，使用vue3-print-nb插件打印时候，多了一页的空白页，找了一下问题，是给html给了高度100%，到那时由于项目已经到后期，所以给css加上了一段代码。然后对应打印的页面就打印的是该打印的页码，不会多一页。

vue-pdf 打印文字空白、每一页多一个空白页、电子签章不显示

qq_42249552的博客

01-20

5523

标题修改node_modules/vue-pdf/src/pdfjsWrapper.js 文字乱码将原来的iframe 改为 div 并设置id, 通过 css 设为 display：none 每一页多一个空白页 修改如下css 完整 pdfjsWrapper.js import {PDFLinkService} from 'pdfjs-dist/es5/web/pdf_viewer'; var pendingOperation = Promise.resolv...

vue2 vue-print-nb使用，以及使用vue-print-nb打印会多一张空白页问题解决

Anyuegogogo的博客

08-04

781

vue2 vue-print-nb使用，以及使用vue-print-nb打印会多一张空白页问题解决

vue 打印出现多余空白页的情况

qq_44051062的博客

06-08

1617

vue 打印出现空白页

使用VUE的打印插件（vue-print-nb）出现多打印一个空白页的问题

NotDreamFish的博客

09-27

3762

先说结论：html标签的高度如果设置为100%，打印div的高度设不设置都会多一个空白页。经过是这样的：最近同事写一个项目，但是遇到了一个问题，使用vue-print-nb打印时，预览中一定会出现两页，并且打印的div没有设置高度也没有设置margin。我创建一个新测试项目后发现新项目不会出现两页的情况，一度怀疑是不是被什么插件影响到了。后来商量以后同事提出可能是继承了父高度，于是我把原项目涉及打印div的父高度的css全都复制了过来，果然出现两页了，问...

浏览器打印多了个空白页

zhangyl812的博客

03-10

2715

浏览器打印出现空白页，外边距合并

解决vue-print插件打印时多了张空白页

盏茶作酒的博客

03-23

1365

一、吐槽天下文章一大抄，说的果然没错。当你搜索vue打印功能时、千篇一律的vue-print插件。使用起来确实很简单，但是问题却没人解决：打印预览时、多了个空白页。有人说是用于height设置成100%造成的，给出的解决办法就是改height。试了下不行！！！话不多说直接上代码二、代码以下代码复制到你打印功能的页面即可。 <style media="print"> @page { size: auto; margin: 3mm; } html { ...