vue2 前端使用积木报表实现跳转到新的浏览器窗口后可以打印

在Vue 2前端中，如果想利用积木报表实现从当前页面跳转到新窗口并支持打印功能，你可以按照以下步骤操作：

1. **引入必要的库**：
确保你在项目中已经安装了`vue-router`用于路由管理，以及如`vue-print-nb`这样的第三方库，它可以帮助实现PDF打印。

npm install vue-router vue-print-nb

2. **配置路由**：
在`main.js`或其他适当的地方，设置一个指向打印页面的路由，例如：

import Vue from 'vue';
import Router from 'vue-router';
import PrintComponent from './components/Print.vue';

Vue.use(Router);

const routes = [
  //...
  {
    path: '/print',
    name: 'print',
    component: PrintComponent,
  },
];

export default new Router({
  routes,
});

3. **创建打印组件**：
在`Print.vue`文件中，使用`<router-view>`渲染内容，并结合`vue-print-nb`插件的`@vue-print-nb.print`事件来启动打印功能。

<template>
  <div>
    <router-view :key="Math.random()" />
    <button @click="printReport">打印报告</button>
  </div>
</template>

<script>
export default {
  methods: {
    printReport() {
      this.$printNb.print({
        // 设置打印选项，如页眉、页脚等
        header: '我的报表',
        footer: 'Page [page] of [total]',
        landscape: true, // 如果需要横版打印
      });
    },
  },
};
</script>

4. **在积木报表组件中触发打印**：
在你的积木报表组件内部，当数据准备好并且用户想要打印时，通过`this.$emit('print-report')`向外部传递打印信号，然后在父组件中监听这个事件并进行相应的跳转：

<!-- 在积木报表组件 -->
<button @click="$emit('print-report')">导出并打印</button>

// 在父组件
<template>
  <PrintComponent :on-print-report="handlePrint"></PrintComponent>
</template>

<script>
export default {
  methods: {
    handlePrint() {
      this.$router.push('/print');
    },
  },
};
</script>

现在，点击积木报表的打印按钮会先跳转到新窗口，然后在新窗口中打开打印预览并完成打印。