vue打印图片以及通过url传递参数

90后中软中年人

已于 2024-07-01 09:47:46 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-02-15 15:22:41 首次发布

本文链接：https://blog.csdn.net/weixin_44685872/article/details/129043228

vue 专栏收录该内容

1 篇文章

订阅专栏

文章介绍了在Vue项目中如何使用vue-print-nb插件来打印图片，包括引入、注册组件以及通过ID绑定图片。同时，讨论了在路由中传递参数的方法，如通过$route.params获取URL参数，并在beforeRouteEnter钩子中处理这些参数。

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

打印图片

1、终端执行  npm i vue-print-nb
2、main.js 中全局引入
import Print from ‘vue-print-nb’; //引入
Vue.use(Print); //注册
3、通过id绑定要打印的图片
<el-image id="imagePrint"
        style="width: 100px; height: 100px"
        :src="require('@/assets/img/icon.png')">
</el-image>
4、v-print绑定按钮
<el-button v-print="printObj">打印</el-button>

5.打印照片配置参数
data() {
  return {
    printObj:{
      id:'imagePrint'，//必须携带，
      popTitle：""，//打印配置页上方的标题
    },
  }
},
其他的参数一般不需要配置

url传递参数

我当时面临的需求是通过二维码跳转至某页面，这个过程需要传递参数。这种条件下我不能用以前的push。本来好兄弟让我通过window.location.href去拿url再拼接走一遍，最后还是百度出来了，以下是我总结的方法。由于保密性质，以下代码只看形似。

首先是在route的index.js中配置路由
 {
	 path: '/message/:name/:sex',
	 component: () =>import('@/components/student/message')
 },
 url请求如下：
 http://localhost'/message/zhangsan/男
 可以在mounted方法里对参数进行处理。
 let a=this.$route.params.name；//zhangsan
 let b=this.$route.params.sex；//男

自己的路要自己走，不拉别人陪跑。

续写：

本来以为这样已经可以了，但是吧，因为修改了路由，导致必须请求时必须带入参数，一般路由也是不需要的，就算我强行使用这个方法，因为我们用的若依框架，这么请求会导致界面没有左侧菜单栏的。公司的前端教我使用以下的方法拦截url：

vue文件是若依菜单指向的，这个方法是与mounted同级的
beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.newId= to.query.newId? to.query.newId: null;
    });
  },
  url如下：
  http://localhost'/message/zhangsan?newId=123456

完结撒花