vue -- 打印功能

最新推荐文章于 2023-04-12 16:20:43 发布
最新推荐文章于 2023-04-12 16:20:43 发布
阅读量615 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jimfang123/article/details/121810553
版权
本文介绍了在Vue.js应用中如何实现打印功能。通过点击打印按钮，页面将跳转到一个新的页面，在那里调用window.print()方法进行内容打印。主要分为两步：配置打印页面的跳转路径和在目标页面设置打印内容。
摘要由CSDN通过智能技术生成

 功能的实现:点击打印按钮 跳转新的页面 然后调用 window.print() 方法

第一步 配置打印跳转的页面路径

 <router-link target="_blank" to="/ceshi/pdf">
      <el-button type="primary">
        打印
      </el-button>
    </router-link>
 

第二步 在跳转的页面写需要打印的内容
 

<template>
  <div v-loading.fullscreen.lock="fullscreenLoading" class="main-article" element-loading-text="Efforts to generate PDF">
<!--    <div class="article__heading">-->
<!--      <div class="article__heading__title">-->
<!--        {
  { article.title }}-->
<!--      </div>-->
<!--    </div>-->
<!--    <div ref="content" class="node-article-content&

                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  fan9wei10n9
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
vue输出当前路径_从零开始搭建一个基础版的 Vue 脚手架

				
			

			

				

					weixin_27923353的博客
				

				

					01-25
					
					412
					
				

			

		

		

			
				
文章正文前言安装 webpack创建项目创建一个简单的 Demo编译 ES6 代码编译 Vue 代码配置 vue-router让项目绑定端口跑起来编译生成 HTML 文件处理 CSScross-env使用 Less处理图片处理字体优化缓存clean-webpack-plugin抽离公共代码优化组件的引入路径配置懒加载拆分webpack结语1. 创建 index.js 文件2. 在当前项目安装 we...

			
		

	



                

              
                



	

		

			

				
					
js 基于vue实现页面内容跳转新窗口打印

				
			

			

				

					Granters的博客
				

				

					12-03
					
					1032
					
				

			

		

		

			
				
基于vue实现页面内容跳转新窗口打印

			
		

	



                


  
              

                


	

		

			

				
					
Vue 传参打开新页面，并打印部分内容

				
			

			

				

					27号白开水的博客
				

				

					04-08
					
					470
					
				

			

		

		

			
				
一、需求
输入单号，点击“打印”按钮 ---> 弹出新页面，打印单号信息

图一

图二
二、代码实现
1. 传参到新页面
<el-form-item label="单号" prop="noticeNumber">
	<el-input v-model="searchForm.noticeNumber"></el-input>
</el-form-item>
<el-button @click="deliveryPrint(searchForm.n

			
		

	





	

		

			

				
					
Vue如何实现打印功能。

				
			

			

				

					ZhangBin0612的博客
				

				

					02-20
					
					396
					
				

			

		

		

			
				
Vue如何实现打印功能。

			
		

	



		

			
		



	

		

			

				
					
Vue的router配置

				
			

			

				

					qq_43145310的博客
				

				

					07-13
					
					2396
					
				

			

		

		

			
				
Vue的router配置

			
		

	





	

		

			

				
					
vue-print-nb 兼容低版本浏览器

				
			

			

				

					11-28
				

			

		

		

			
				
`vue-print-nb` 是一个针对 Vue.js 应用程序设计的打印插件，它允许开发者方便地实现页面或组件的打印功能。标题提到的“vue-print-nb 兼容低版本浏览器”，这意味着该插件已经考虑到了对旧版浏览器的支持，确保在...

			
		

	





	

		

			

				
					
vue-print:基于vue-print-nb打印组件做的功能拓展

				
			

			

				

					05-07
				

			

		

		

			
				
vue-print基于vue-print-nb打印组件的拓展功能,下载后放在项目中引用详情请看博客介绍Installmain.js文件引用import Print from './xxxx/vue-print-nb/src'Vue.use(Print);

			
		

	





	

		

			

				
					
vue-ntko-demo.zip

				
			

			

				

					11-05
				

			

		

		

			
				
1. **Vue组件化开发**：Vue的核心理念是组件化，每个独立的功能或UI部分都可以封装为一个组件。在"vue-ntko-demo"中，可能包含了一个或多个专门用来处理Office文档操作的Vue组件。  2. **NtKO Office控件的安装与...

			
		

	





	

		

			

				
					
vue-html-to-paper:Vue mixin for paper printing html elements

				
			

			

				

					05-12
				

			

		

		

			
				
Vue.js 是一个流行的前端JavaScript框架，它允许开发者...总的来说，`vue-html-to-paper` 是一个实用的工具，对于那些需要在Vue应用中提供打印功能的开发者来说，它极大地简化了实现过程，同时也为用户体验提供了便利。

			
		

	





	

		

			

				
					
electron-vue-print-demo:electron+vuecli3 实现打印小票功能

				
			

			

				

					05-25
				

			

		

		

			
				
electron+vuecli3 实现设置打印机，静默打印小票功能 使用 git clone https://github.com/sunniejs/electron-vue-print-demo.git npm install npm run electron:serve 生成效果 实现 操作思路 1.用户点击打印 2.查询...

			
		

	





	

		

			

				
					
vue打印功能遇到的问题（3）新页面打印跳转

				
			

			

				

					E.N.Edward
				

				

					12-25
					
					994
					
				

			

		

		

			
				
window.localStorage.setItem("print", JSON.stringify(this.currentValue));
      let routeData = this.$router.resolve({
        path: `/examAdmissionPrint`,
        name: "examAdmissionPrint"
      });
...

			
		

	





	

		

			

				
					
Vue配置——vue-router的详细配置

				
			

			

				

					weixin_45532305的博客
				

				

					03-07
					
					1万+
					
				

			

		

		

			
				
1. 初始化vue-router
首先安装vue-router，并创建名为router的文件夹，在下新建一个index.js
npm i vue-router
2. vue-router的简单配置
首先引入vue和vue-router
然后vue.use引入该插件
创建个常量并按一些规律来引入页面，也就是.vue文件
import Vue from 'vue'
import VueRouter f...

			
		

	





	

		

			

				
					
Vue_router(路由)

				
			

			

				

					骑大马挎大刀
				

				

					04-11
					
					2520
					
				

			

		

		

			
				
一：创建路由：
1、router / index.js 文件
import Vue from 'vue'
import VueRouter from 'vue-router'
// 调用路由
Vue.use(VueRouter)
const routes = [
    {
        path: '/',
        component: () => import('../views/a.vue')// 引入组件
    }, {
        path: '/b',
        co

			
		

	





	

		

			

				
					
注意丨3月AQF考试准考证打印通道已开放

				
			

			

				

					jcjyaqf1的博客
				

				

					03-13
					
					388
					
				

			

		

		

			
				
各位考生：
量化金融分析师AQF2019年3月全国统一AQF考试准考证打印通道已开放，请及时下载打印。
量化金融标准委员会
2019年3月11日
&gt;&gt;&gt;点击咨询2019年9月AQF考试报名时间
步骤：
1、首先登陆协会官网 ，登录账号;
　　
　　2、考试中心 - 准考证下载
　　
　　3、证书类型-考试地点-考试时间，依次勾选完，随机点击下载打印即可。

　　ps：AQF准考证...

			
		

	





	

		

			

				
					
window.print()的确认和取消事件

				
			

			

				

					qq_41656046的博客
				

				

					04-12
					
					1865
					
				

			

		

		

			
				
【代码】window.print()的确认和取消事件。

			
		

	





	

		

			

				
					
vue项目设置打包后的静态文件访问路径

					
热门推荐

				
			

			

				

					start_sea的博客
				

				

					08-31
					
					1万+
					
				

			

		

		

			
				
*啰嗦一下：**相同域名下可能会存在两份相关或不相关的代码，需要通过切换文件夹路径进入不同项目时，需要在项目打包输出代码时设置静态文件的访问路径（vue、react都要）。**静态文件访问路径说明：**项目的静态文件访问路径在本地运行和服务器访问是有区别的，默认状态下服务器上的项目代码，访问路径是从服务器根目录开始。vue项目的最终项目文件需要经过打包输出，静态文件的访问路径需要在vue.config.js文件中设置。**H5中的访问设置：**在H5中，静态文件访问路径的区别。...

			
		

	





	

		

			

				
					
vue中实现打印功能的方法与注意事项

				
			

			

				

					weixin_44463883的博客
				

				

					06-06
					
					9351
					
				

			

		

		

			
				
vue中实现打印功能的方法与注意事项

			
		

	





	

		

			

				
					
vue html页面打印功能vue-print-nb

				
			

			

				

					Lingling_12356的博客
				

				

					12-10
					
					748
					
				

			

		

		

			
				
准考证打印
 <el-button v-if="scope.row.examState==1"
                     type="text"
                     @click="examPrint(scope.row.arrangeId)"
          >准考证打印
          </el-button>

examPrint方法
// 准考证打印
 examPrint(arrangeId) {
    let params =

			
		

	





	

		

			

				
					
vue实现打印的两种方法

				
			

			

				

					huxihua2006的博客
				

				

					10-26
					
					1419
					
				

			

		

		

			
				
vue2.0实现打印

			
		

	





	

		

			

				
					
vue用vue-print-nb实现打印功能

					
最新发布

				
			

			

				

					03-07
				

			

		

		

			
				
Vue-Print-NB是一个基于Vue.js的打印插件，它可以帮助我们在Vue项目中实现打印功能。使用Vue-Print-NB，我们可以轻松地将指定的DOM元素打印成PDF或者图片格式。

要使用Vue-Print-NB，首先需要安装该插件。可以通过npm或者yarn进行安装，具体命令如下：

```
npm install vue-print-nb
```

或者

```
yarn add vue-print-nb
```

安装完成后，在Vue项目的入口文件中引入并注册该插件：

```javascript
import Vue from 'vue'
import VuePrintNB from 'vue-print-nb'

Vue.use(VuePrintNB)
```

接下来，在需要打印的组件中，使用`v-print`指令来标记需要打印的DOM元素。例如：

```html
<template>
  <div>
    <div v-print>
      <!-- 需要打印的内容 -->
    </div>
    <button @click="print">打印</button>
  </div>
</template>

<script>
export default {
  methods: {
    print() {
      this.$print()
    }
  }
}
</script>
```

在上面的例子中，我们使用`v-print`指令标记了需要打印的内容，然后在按钮的点击事件中调用`this.$print()`方法来触发打印操作。

需要注意的是，Vue-Print-NB还提供了一些配置选项，可以通过传递参数给`v-print`指令来进行配置。例如，可以设置打印的页面标题、打印的方向等。具体的配置选项可以参考Vue-Print-NB的文档。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值