vue如何用window.print()打印局部?

代码

http://jsrun.net/m7yKp/edit

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>iview example</title>
  <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
  <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
  <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>

<body>
  <div id="app">
    <i-button @click="toPdf">test</i-button>

    <div id="main">
      1111111111111111111111
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
      },
      methods: {
        toPdf: function () {
          const bdhtml = window.document.body.innerHTML;
          const jubuData = document.querySelector('#main').innerHTML;
          window.document.body.innerHTML = jubuData;
          window.print();
          // 重新给页面内容赋值;
          window.document.body.innerHTML = bdhtml;
        }
      }
    })
  </script>
</body>

</html>
问题
  1. 我想导出 #main, 但是这样导出后,dom重新加载了,事件没有重新挂载(重新点击test时就失效了),这个怎么办呢?
  2. 或者有其他方法做到吗?
阅读 8.1k
2 个回答

我想我这篇文章应该可以帮助到你iview打印

你可以用location.reload();刷新你的页面,如果体验不好,那就用vue的provide/inject方式刷新

推荐问题
宣传栏