关于打印出现空白的问题

问题

在打印的需求中，我们一般是将数据展示在页面中，然后通过调用window.print()，将页面打印出来
但是这里有一个顺序问题，我们需要先加载完页面才能进行打印，不然就会出现白屏问题。

解决方法

this.nextTick()

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。
但是 mounted（） 不会承诺所有的子组件也都一起被挂载。所以在mounted中执行this.nextTick（）会有子组件还没加载完成的情况。

async mounted() {await this.getShoppingList(); // 获取数据this.$nextTick(() => {window.print();});},

构建异步操作Promise（）

将请求的数据封装成异步的Promise，
调用Promise.all(),等到所以异步执行完成，在执行打印

async mounted() {await Promise.all([this.getPrintList(), // 获取数据this.loadImage('https://xxxxx.png'), // 获取图片]);window.print();},
methods: {loadImage(src) {return new Promise((resolve, reject) => {const img = new Image();img.onload = resolve;img.onerror = reject;img.src = src;});},
}

！！！如有错误欢迎留言

关于打印出现空白的问题相关推荐

调用浏览器局部打印，空白、只有一页问题、火狐兼容
调用浏览器局部打印,空白.只有一页问题.火狐兼容项目中需要局部打印页面的图表,图表类型多而杂,因此html结构中包含了canvas和iframe,iframe中又包含canvas. 刚开始根据网上的 ...
Vue中使用v-print打印出现空白页
本人最近做项目时遇到打印出现空白页的问题,查阅资料后找到解决办法,方便同行们快速解决问题. 1.解决办法:在css中加入 "body{ height:auto; }" 即可解决问题 ...
新CSDN文章转成PDF、打印(去空白)
新CSDN文章一键打印.输出PDF(自动阅读全文.全清爽模式) 之前的方法出现的问题是打印出的预览图会有右边一大片空白,这个方法实现将空白去掉一.功能及修改方法使用方法:按"F12&qu ...
小票打印机打印出空白
web打印小票,驱动安装正确,打印空白,这时需要在浏览器页面设置里面设置去掉页面页脚. 转载于:https://www.cnblogs.com/brucetie/p/4747984.html
西铁城CL-S631无法打印，打印测试空白
问题描述:西铁城CL-S631无法打印突然无法打印,电脑上打印测试页时纸张输出几张空白的之后设定和错误灯同时慢闪,并伴有响声,按一下取消键声音停止,重启打印机,"设定/再印刷"(M ...
CFormView实现了打印预览，但是打印室空白
这个问题已经有人提问过了,但是他自己解决了,现在我遇到这个问题了,不知道怎么解决了,在OnDraw函数里绘制报表实现了类似的功能,但是这个问题没解决总觉得不舒服我需要打印一个CFormView,按照 ...
html打印有空白页
网页打印,前面总有一张空白页,这种情况也许是css坏的事. 查看源代码后发现如下一行代码: <div style='page-break-before:always'></div&g ...
vue-pdf 打印文字空白、每一页多一个空白页、电子签章不显示
bug图效果图标题 1 电子签章不显示 1. 1 修改node_modules/pdfjs-dist/build/pdf.worker.js 注释下图选定代码 1.2 修改node_modules ...
WPS表格打印的时候有非常多的空白页应该怎么办？
老古偶尔在接收同事发来的表格数据文件打开预览发现有非常多的空白页,但是实际内容只有几页,如果直接这样打印不单单是页码错误,而且会浪费很多纸张,毕竟绝大多数都是空白页.比如这份文件实际内容只有 11 页 ...

关于打印出现空白的问题

问题

解决方法

关于打印出现空白的问题相关推荐

最新文章

热门文章