vue打印print

最新推荐文章于 2024-07-25 14:09:05 发布

张小娟

最新推荐文章于 2024-07-25 14:09:05 发布

阅读量341

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42110309/article/details/110641206

版权

注意, iframe打开后须close

  //判断iframe是否存在，不存在则创建iframe
  let iframe=document.getElementById("iframe");
  if(!iframe){
      iframe = document.createElement('IFRAME');
      let doc = null;
      iframe.setAttribute("id", "iframe");
      iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
      document.body.appendChild(iframe);
      doc = iframe.contentWindow.document;
      // 这里可以自定义样式
      //doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
      // 获取数据,写入table
      let totalPeople = this.$refs.tableRef.echartsData;
      doc.write('<h4>人员统计</h4>')
      doc.write('<table border="1" cellpadding="0" cellspacing="0">')
      doc.write('<tr><td>人员分类</td><td>总数</td></tr>')
      for(let i in totalPeople){
          let s = '<tr><td>' + totalPeople[i].name + "</td><td>" + totalPeople[i].value + '</td></tr>'
          doc.write(s);
      }
      doc.write("</table>")
      doc.close();
      iframe.contentWindow.focus();
  }
  iframe.contentWindow.print();
  if (navigator.userAgent.indexOf("MSIE") > 0){
      document.body.removeChild(iframe);
  }