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.3k
2 个回答

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题