vue中 window.print() 解决打印和隐藏同时进行的问题

最新推荐文章于 2024-06-10 16:43:59 发布
最新推荐文章于 2024-06-10 16:43:59 发布
阅读量1.9k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/josiecici/article/details/108848805
版权

解决办法：setTimeout或者$nextTick 如下图

printPdf() {
  this.$emit("toClosePrintMap", false);
  // setTimeout(() => {
  this.$nextTick(() => {
    window.print();
    this.$emit("toClosePrintMap", true);
  });
  // }, 0);
},
星良辰寻
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS打印插件之jQuery.EasyPrint.js使用文档
07-21
原生JS打印插件之jQuery.EasyPrint.js使用文档 调用浏览器自带打印功能，使用JavaScript的 window.print(); 方法。 使用JS实现打印功能；JavaScript 实现打印操作；javascript打印大全；通用；js实现打印的方式；JS...
vue打印window.print( )打印方法使用
lucky_dog18的博客
12-06 3266
vue 之window.print( )打印功能
vue实现打印功能
weixin_44235736的博客
09-25 637
vue实现打印功能 安装npm i vue-print-nb 在main.js中引入并注册 // 打印 import Print from '@/plugins/print' // 注册 Vue.use(Print) 3.公共的js方法（我写在plugins里面） // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Pr
【前端】使用window.print() 前端实现网页打印详细教程（含代码示例）
最新发布
06-10 1万+
【前端】使用window.print() 前端实现网页打印详细教程（含代码示例）
html 打印时隐藏,html 打印相关操作与实现详解
weixin_39746282的博客
06-03 719
原理为调用 window.print() 方法，但是该方法只能对当前页面全部打印，所以有了以下方案来解决局部打印1: 利用 iframe 将需要打印的元素和样式注入 再调用打印// 示例代码function print () {let ifElement = document.getElementById('ifId')const addHtmlPrint = () => {const co...
window.print() 打印隐藏内容
孑立
05-10 1023
快来看看吧 快来看看吧 快来看看吧
VUE3开发时window.print()遇到的打印空白问题以及解决
m0_67279243的博客
01-03 850
因为开发是使用的内网环境无法上传，只能意识流描述问题，客户需求是需要做一个打印功能，我的解决方案是点击打印后跳转staticRouter中调整好的页面中调用window.print()进行打印，其中外层组件不设置高度使得打印可以自动分页，但是出现了当分页时一个<el-table被分页隔开成两个部分之后上方的<el-table数据部分全空白，第一条数据在第二页下方出现，这会极大影响客户使用感受。暂时没搞懂，请各位大佬指正，我因为主要是java后端工程师，前端技术实在捉襟见肘。附一则ChatGPT4解答。
vue2中使用window.print打印，input没有值的问题
二十一克阳光！的博客
05-11 1201
引入jQuery，如果不引入jQuery后面的解决方法无法使用 npm install jquery --save-dev 在vue.config.js中配置 const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: 'jquery',
VUE打印demo，自动分页
10-10
5. `styles`: 可能包含用于打印的CSS文件，如`print.css`，用于定义打印样式。 `public`目录则包含了非Vue编译的静态资源，比如HTML模板、图片、字体等。 `babel.config.js`用于配置Babel，将现代JavaScript语法...
vue-gojs.zip
09-19
以上就是在Vue.js中使用Go.js实现流程图效果的基本步骤，包括保存、下载、打印和属性面板功能。实际项目中可能还需要处理用户交互、数据同步、错误处理等细节，但这个概述应该足以帮助你开始你的Vue + Go.js旅程。在...
vue部分功能编写,print...等
07-13
关于"print..."，在Vue中，可以利用`window.print()`方法来实现页面打印功能。通常，我们会在某个按钮的点击事件中调用这个方法，同时可能需要通过CSS媒体查询来优化打印样式，确保打印内容的布局和视觉效果。此外，...
electron + vue项目实现打印小票功能及实现代码
10-17
这个过程中，关键在于利用Electron提供的`ipcMain`和`ipcRenderer`进行主线程与渲染线程之间的通信，以及`<webview>`标签实现内容的显示和打印。通过这些技术，可以创建一个用户友好的桌面应用，无缝集成打印功能，...
【解决：vue的打印功能window.print 会多出一页空白页】
weixin_49066399的博客
11-29 3784
window.print 会多出一页空白页
window.print打印页面时，隐藏部分打印按钮
qq_33172029的博客
03-27 3819
1）谷歌可用：（IE8，弹出打印窗体后，但原窗体内容，会变成空白） function applyPrint(){ if(!confirm('确定要打印吗？')){ return; } var headstr ="<html><head><title>招聘员工申请书</title>" + "</hea...
vue-print-nb 解决 vue 打印问题，并且隐藏页眉页脚
Insist_bin的博客
07-20 1万+
1、通过 npm 安装 vue-print-nb npm install vue-print-nb --save 2、挂载到 Vue 上 ​import Print from 'vue-print-nb' Vue.use(Print) 3、配置打印对象 <div id="main"> 这里是要打印的东西 </div> <!-- 打印按钮，通过 v-print 调用打印事件 --> <button v-print="printObj">打印&lt
【前端学习日记】Vue中通过点击事件隐藏按钮和显示按钮
qq_54207312的博客
07-18 1万+
初始时，第一个按钮的布尔值为false，所以不会隐藏，当点击按钮时，调用edit事件，届时布尔值取反，第一个按钮布尔值为true，第二个为false，所以第二个按钮显示，而第一个隐藏。我想要实现的场景是，有两个按钮，但页面上只显示一个按钮，另一个隐藏。通过点击按钮时触发事件，先前显示的按钮隐藏，而另一个按钮渲染出来进行其他的事件调用。这里由于我的第二个按钮有其他事件触发，所以没有单独写按钮事件，各位可以自行根据需要补齐。同第一个按钮样，点击第二个按钮时，取反布尔值即可实现显示和隐藏。...
解决Vue的button按钮显示隐藏问题
热门推荐
歲月的孤獨
09-04 1万+
解决Vue的button按钮显示隐藏问题 单个按钮控制显示隐藏 <template> <div> <div v-if="isshow">{{isshow}}</div> <button @click="change()">点击</button> </div> <...
Vue中打印网页的指定部分的几种方法
对啊我是太阳啊的博客
10-28 6165
楔子 这里是以下会用到的一些知识和说明 可以在GitHub上下载打印插件，但是自己写更简单，所以我就自己写了 本例为打印网页上的一个表格 window.print()打印的是整个网页的HTML内容，不包括CSS @media print{ ... }可以设置打印时样式 正文 网页效果： 目标：右键点击打印按钮时能打印表格，忽略下方的文字和图片，并且保留样式 思路：点击打印按钮时，...
Vue el-button根据条件显示与隐藏
qq_42403906的博客
10-12 9919
'none':'' }" 控制按钮是否隐藏。'冻结' : '解除冻结' }} 控制按钮显示的样式。需求是按照delete的值来判断为冻结或者解除冻结，但是有个情况是deleted=1时不显示这个按钮。
Vue调用 window.open()使用window.print()打印指定的vue 组件
06-09
要在 Vue 中使用 `window.open()` 打开新窗口并调用 `window.print()`，可以按照以下步骤进行： 1. 首先，在 Vue 组件中定义一个方法，用于打开新窗口并在其中加载组件内容： ``` printComponent() { // 创建一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值