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

最新推荐文章于 2024-09-23 17:44:50 发布

Orange_w

最新推荐文章于 2024-09-23 17:44:50 发布

阅读量3.8k

点赞数 3

分类专栏： Vue学习文章标签： javascript vue vue.js

本文链接：https://blog.csdn.net/orange_w/article/details/108263363

版权

Vue学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端小白，最近做一个vue项目，需要打印页面指定的组件内容，在网上百度借鉴了很多大佬的方法，都不是很适用。所以根据自己的理解写了一个简单地打印功能。

项目的详情页
点击打印，获取页面所有详细信息
在这里插入图片描述
直接附上代码：

//打印
    doPrint(){ 
      let subOutPrintButton=document.getElementsByClassName("print");
      var newContent=[];
      for(var i=0;i<subOutPrintButton.length;i++){  
       var obj=subOutPrintButton[i].innerHTML;
       newContent.push(obj);
      }
      document.body.innerHTML = newContent;    
      document.getElementsByTagName('body')[0].style.zoom=0.85;
      window.print();
      window.location.reload();
    }
   },


思路是这样的：先获取我需要的组件，给他们都添加Class，获取它们的innerHtml，
循环遍历后push到我创建好的newContra中，让 document.body.innerHTML=newContent;    
就可以window.print();打印了
方法很简单，只要理解，其实比直接用插件更简单。