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

最新推荐文章于 2024-06-10 16:43:59 发布

li@h

最新推荐文章于 2024-06-10 16:43:59 发布

阅读量3.7k

点赞数 10

文章标签： vue.js javascript 前端

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

版权

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

<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

关注关注

10
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
【解决：vue的打印功能window.print 会多出一页空白页】

window.print 会多出一页空白页
复制链接

扫一扫

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

qq_52753722的博客

11-15

1906

windows.print()打印

vue-lazy-component：:snail:Vue.js 2.x组件级懒加载方案-Vue.js 2.x组件级延迟加载解决方案

02-06

标签中的 "Vue.jsVue" 暗示了这个插件是针对Vue.js框架的，而 "plugin" 表明它是一个扩展功能的工具，"component" 指出它与Vue组件有关，"lazyload" 明确表示它是关于延迟加载的解决方案。在压缩包`vue-lazy-...

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

关于打印出现空白的问题

weixin_44748107的博客

03-10

1992

问题在打印的需求中，我们一般是将数据展示在页面中，然后通过调用window.print()，将页面打印出来但是这里有一个顺序问题，我们需要先加载完页面才能进行打印，不然就会出现白屏问题。解决方法 this.nextTick() this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。但是 mounted（）不会承诺所有的子组件也都一起被挂载。所以在mounted中执行this.nextTick（）会有子组件还没加载完成的情况。 async mounted() {

【前端】使用window.print() 前端实现网页打印详细教程（含代码示例）

最新发布

06-10

1万+

【前端】使用window.print() 前端实现网页打印详细教程（含代码示例）

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

wangzhe123_的博客

08-23

4010

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

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

qq_51055690的博客

04-16

3054

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

vue-pdf预览乱码问题、打印乱码多一页空白问题

Fansr_的博客

05-12

2823

一、解决乱码问题参考；https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7 将github上红色背景代码删除、绿色背景代码替换上；二、解决多一页空白问题；找到pdfjsWrapper.js文件上面替换注释的代码即可 '@supports ((size:A4) and (size:1pt 1pt)) {' + ...

vue中使用vue-print.js实现多页打印

10-15

主要介绍了vue中使用vue-print.js实现多页打印，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

原生JS打印插件之jQuery.EasyPrint.js使用文档

07-21

调用浏览器自带打印功能，使用JavaScript的 window.print(); 方法。使用JS实现打印功能；JavaScript 实现打印操作；javascript打印大全；通用；js实现打印的方式；JS怎么实现页面打印呢？JavaScript 实现打印,打印...

vue+element实现打印页面功能

10-16

主要介绍了vue+element实现打印页面功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下

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

weixin_42234899的博客

05-11

1655

vue打印多出空白页

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

由浅入深？

05-20

466

这个标题的理解应该是用字符串格式的方法设置字典 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插件，打印时会有多出来的空白页问题解决

Admin_yws的博客

05-29

3255

vue使用print打印时，会多出空白页，这多半是外边距导致的，将打印的dom对象的margin 设置为0，即可解决

解决: 使用html2canvas和print-js打印组件时, 出现空白页

qq_43340606的博客

09-11

1303

解决: 因为是使用html2canvas转换成图片后才打印的, 而图片是行内块级元素, 会有间隙, 所以被挤下去了, 所以可以给图片设置样式, 转换成块级元素。如图所示: 当我利用html2canvas转换成图片后, 然后使用print-js打印多张图片, 会出现空白页。

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

hyy_20021212的博客

08-07

837

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

详解window.print()，实现长列表打印分页

chenlim87的博客

09-22

4011

其实我们只要控制打印的行数就可以了。我们需要知道打印元素的高度和表格行的高度，算出一页纸可以打印多少行，超出的部分放到下一页打印。4、-webkit-print-color-adjust：是一个在浏览器中强制打印背景颜色和字体颜色的css属性，当打印出来的某些元素的背景颜色没有被显示时，可以使用。我们页面的样式和打印页面时的样式是两个不同的样式，打印时会默认携带页面的样式，同时呢我们也可以修改页面打印时的样式。1、先获取指定容器中的内容，将body的内容替换掉，调用了打印方法后，再把原来的body恢复。

前端实现打印预览功能以及page-break-inside属性解决打印换行问题（打印预览表格或文字被分割开）

05-18

1万+

遇到的问题：打印预览的时候表格被分割了，就是一共两页而其中一行显示在不同的两个页面。如下图：

vue-print-nb插件打印预览总是多一张空白页

langligelangxy的博客

07-27

316

【代码】vue-print-nb插件打印预览总是多一张空白页。

Vue调用 window.open()使用window.print()打印指定的vue 组件

06-09

要在 Vue 中使用 `window.open()` 打开新窗口并调用 `window.print()`，可以按照以下步骤进行： 1. 首先，在 Vue 组件中定义一个方法，用于打开新窗口并在其中加载组件内容： ``` printComponent() { // 创建一个新的窗口 const printWindow = window.open('', 'Print Window'); // 在新窗口中加载组件 printWindow.document.write('<html><head><title>Print Component</title></head><body>'); printWindow.document.write(this.$refs.printableComponent.innerHTML); printWindow.document.write('</body></html>'); // 返回新窗口对象 return printWindow; } ``` 2. 在模板中添加一个按钮或链接，调用该方法并存储返回的窗口对象： ``` <template> <div> <div ref="printableComponent">  </div> <button @click="print">打印</button> </div> </template> <script> export default { methods: { print() { // 调用打印方法 const printWindow = this.printComponent(); // 在新窗口中调用打印方法 printWindow.print(); } } } </script> ``` 这样，点击按钮将会在新窗口中打印指定的组件内容。注意，在新窗口中加载组件时，需要使用 `$refs` 获取组件的 DOM 元素，例如上面的例子中使用了 `this.$refs.printableComponent.innerHTML` 获取了组件的 HTML 内容。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交