03 导出，面包屑，pdf

1 vue导出excel

vue导出excel表格（详细教程）_vue vue-json-excel_小胖梅前端的博客-CSDN博客

## vue导出excel表格

1. 安装

    npm install vue-json-excel -S

2. main.js中引入

    ```js

        import JsonExcel from 'vue-json-excel'

        Vue.component('downloadExcel', JsonExcel)

    ```

3. 在代码中使用

    ```js

         <template>

<download-excel

        class="export-excel-wrapper"

        :data="DetailsForm"

        :fields="json_fields"

        :header="title"

        name="需要导出的表格名字.xls"

      >

        <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->

        <el-button type="success">导出</el-button>

      </download-excel>

</template>

    ```

4. 修改配置参数

    ```js

        title: "xx公司表格",

        json_fields: {

                "排查日期":'date',

                "整改隐患内容":'details',

                "整改措施":'measure',

                "整改时限":'timeLimit',

                "应急措施和预案":'plan',

                "整改责任人":'personInCharge',

                "填表人":'preparer',

                "整改资金":'fund',

                "整改完成情况":'complete',

                "备注":'remark',

            },

            DetailsForm: [

                {

                date: "2022-3-10",

                details: "卸油区过路灯损坏",

                measure: "更换灯泡",

                timeLimit: "2022-3-21",

                plan: "先使用充电灯代替,贴好安全提醒告示",

                personInCharge: "王xx",

                preparer: "王xx",

                fund: "20元",

                complete: "已完成整改",

                remark: "重新更换了灯泡",

                },

       

      ],

    ```

按上边1，2，3 步骤后，封装DetailsForm，json_fields：

从后端查出数据，前端进行导出

1.2 勾选导出 

选了哪条，就导出哪一条

2面包屑

思路:在roter的index.js中定义meta路由元数据,然后在computed中监听路由的动态变化,然后在面包屑组件中使用v-for遍历

2.1 路由

配置路元

{
    path: '/',
    name: 'manage',
    redirect:"/home",
    meta:{
      name:"主页"
    },
    component: () => import('../views/Manage'),
    children: [
      {
        path: '/home',
        name: '首页',
        meta:{
          name:""
        },
        component: () => import('../views/Home')
      },
      {
        path: '/person',
        name: '个人信息',
        meta:{
          name:"个人信息"
        },
        component: () => import('../views/Person')
      },
    ]
  },
  {
    path: '/system',
    name: 'system',
    meta:{
      name:"系统管理"
    },
    redirect: "/system/user",
    component: () => import('../views/Manage'),
    children: [
      {
        path: 'user',
        name: '用户管理',
        meta:{
          name:"用户管理"
        },
        component: () => import('../views/User')
      },
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login')
  },
  {
    path: '/regist',
    name: 'regist',
    component: () => import('../views/Regist')
  },

2.2 Breadcrumb.vue： 

<template>
  <el-breadcrumb separator="/" class="bread">
    <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
    <el-breadcrumb-item v-for="item in navs" :key="item.path" :to="{ path: item.path }">{{ item.meta.name}}</el-breadcrumb-item>
</el-breadcrumb>
</template>

<script>
export default {
    computed:{
        navs(){
            console.log('路由信息',this.$route.matched);
            let routes = this.$route.matched;
            //处理第一个路由的信息
            routes[0].path ='/';
            return routes
        }
    },
    created(){
        console.log(this.$route);//包含当前的路由信息 以及上级路由信息 
    }
}
</script>

<style lang="less" scoped>
.bread{
    margin-bottom: 10px;
}
</style>

2.3 当控制台跳转当前路由报错

在router目录下index.js中加上

//点击跳转同一个路径
// 在VueRouter上配置路由跳转，在router中的index.js中加上以下代码，注意加在use之前
const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
    return routerPush.call(this, location).catch(err => {})
};

2.4  注册：

2.5 引入使用：

直接放在vue当中（因为设置成了全局组件，可以直接使用）

<Breadcrumb></Breadcrumb>

3 pdf打印

vue-pdf

## Pdf打印

1. 安装

    npm install --save vue-pdf

2. 组件使用

    ```js

        <template>

            <pdf src="./static/relativity.pdf"></pdf>

        </template>

        <script>

            import pdf from 'vue-pdf'

            export default {

            components: {

                pdf

            }

        }

    ```

3.1 单页打印

将pdf放在public当下

 打印：

 

3.2  多页打印

1 展示 当前页，总条数

2 展示所有pdf数据

3 分页展示pdf数据

<template>
    <div>
        <el-button @click="printHandle">打印</el-button>
        <hr>
        <!-- 1. 默认获取第一张pdf  可以是单个的pdf图片 -->
        <!-- <pdf src="/sxt.pdf" ref="myPdf"></pdf> -->
        <!-- 2. 获取pdf的总页码数 -->
        <!-- <div> 当前页码：{{ currentPage }}/ {{ pageCount }}</div>
        <pdf
			src="/sxt.pdf"
			@num-pages="pageCount = $event"
			@page-loaded="currentPage = $event"
		></pdf> -->

        <!-- 3. 展示所有的pdf内容  page显示的页码 -->
        <!-- <pdf v-for="i in numPages" :key="i" :src="src" :page="i" style="display: inline-block; width: 25%"></pdf> -->

        <!-- 4. 分页展示pdf -->
        <!-- 分页器 -->
        <Pagination :total="total" :pageSize="pageSize" @CurrentChange="CurrentChange"></Pagination>
        <pdf :src="src" :page="page" ref="myPdf"></pdf>

    </div>
</template>

<script>
import pdf from 'vue-pdf'
import Pagination from '@/components/pagination/Pagination.vue'
var loadingTask = pdf.createLoadingTask('/sxt2.pdf')
export default {
    components: {
        pdf,
        Pagination
    },
    data() {
        return {
            currentPage: 0,//当前的页码
            pageCount: 0,//总页码
            src: loadingTask,//src pdf路径地址
            numPages: undefined,//总页码
            page:1,
            total:1,//总页码
            pageSize:1,//页码条数
        }
    },
    mounted() {
        this.src.promise.then(pdf => {
            //获取总的页码数
            this.numPages = pdf.numPages;
            this.total = pdf.numPages;
        });
    },
    methods: {
        //分页--------------
        CurrentChange(page){
            this.page = page;
        },
        //打印PDF
        printHandle() {
            this.$refs.myPdf.print();
        }
    }
}
</script>

<style>

</style>