vue 导出 导入

vue 导出

方法一：

1、util自带工具包:

Export2Excel.js

2、引用：

import { export_json_to_excel } from ‘@/utils/Export2Excel’

3、导出方法

formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => {
  //
    var props = j.toString().split('.')
    if (props.length === 2) {
        if (v[props[0]] === undefined || v[props[0]] === null) {
          return ''
        }
        return v[props[0]][props[1]]
      }
    return v[j]
  }))
},

//exportExcel(){}导出按钮方法名
exportExcel(){
  var tHeader = ['企业名称', '监测点', '监测时间']
  var filterVal = ['customerName', 'meterName', 'dataTvFormat']
  var filename = 'excel表格名'
  var that = this
  //查询方法
  getshow({
    showCount: that.infoShowCount,
    currentPage: that.infoCurrentPage,    
    param: {         
      vehicleId: that.vehicleId,
      startTime: that.startTime,
      endTime: that.endTime,
    } 
  }
  ).then(response => {
    const data = that.formatJson(filterVal, response.data)
    export_json_to_excel({
      header: tHeader,
      data,
      filename: filename,
      autoWidth: true,
      bookType: 'xlsx'
    })   
   
  })
}

方法二：
视频来源：https://www.bilibili.com/video/BV1EK4y1L7ga
此方法能够导出多级表格。

1、安装xlsx库

npm install xlsx

2、 file-saver

npm install file-saver

3、编写保存函数，文件位置：src/utils/htmlToExcel.js

import FileSaver from “file-saver”; import XLSX from “xlsx”;

const htmlToExcel = {
getExcel(dom,title=‘默认标题’,){
var excelTitle = title;
var wb = XLSX.utils.table_to_book(document.querySelector(dom));
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {bookType: “xlsx”,bookSST: true,type: “array”});
try {
FileSaver.saveAs(
new Blob([wbout], { type: “application/octet-stream” }),
excelTitle + “.xlsx”
);
} catch (e) {
if (typeof console !== “undefined”) console.log(e, wbout);
}
return wbout;
} };

export default htmlToExcel;

4、使用函数，文件位置src/views/TablePage.vue

注:表格导出实现解释，给展示表格添加选择功能，通过handleSelectionChange函数将选中数据与selectData绑定，在选中需要导出数据后点击导出按钮，展示el-dialog并将selectData数据展示在el-dialog中的表格，此表格为最后导出的表格，所以id赋值selectTable，最后确认打印调用exportExcel函数，通过htmlToExcel.getExcel(‘#selectTable’,‘导出的自定义标题’)导出Excel文件。

<template>
    <div>
        <el-button type="primary" style="margin:20px;" @click="exportExcelSelect">导出Excel</el-button>
        <el-table
            :data="tableData"
            @selection-change="handleSelectionChange"
        >
            <el-table-column
               type="selection"
            >
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="日期"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
            >
            </el-table-column>
            <el-table-column label="详细地址">
                <el-table-column
                        prop="province"
                        label="省份"
                >
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="市区"
                >
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址"
                >
                </el-table-column>
                <el-table-column
                        prop="zip"
                        label="邮编"
                >
                </el-table-column>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
            >
                <template>
                    <el-button type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow">
            <el-table :data="selectData" id="selectTable" height="380px">
                <el-table-column
                        prop="date"
                        label="日期"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                >
                </el-table-column>
                <el-table-column label="详细地址">
                    <el-table-column
                            prop="province"
                            label="省份"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="市区"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                    >
                    </el-table-column>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="exportExcel">确定保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import htmlToExcel from '@/utils/htmlToExcel'
    export default {
        name: "ExcelPage",
        data(){
            return{
                tableData: [
                    {
                        date: '2016-05-03',
                        name: '王小天',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-02',
                        name: '王小明',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-04',
                        name: '王小智',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-01',
                        name: '王小红',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-08',
                        name: '王小华',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-06',
                        name: '王小丽',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        date: '2016-05-07',
                        name: '王小花',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }
                ],
                selectData:[],
                selectWindow:false,
            }
        },
        methods:{
            exportExcel() {
                htmlToExcel.getExcel('#selectTable','导出的自定义标题')
            },
            exportExcelSelect(){
                if (this.selectData.length < 1){
                    this.$message.error('请选择要导出的内容！');
                    return false;
                }
                this.selectWindow = true;
            },
            handleSelectionChange(val) {
                this.selectData = val;
            }
        }
    }
</script>

<style scoped>
</style>

vue 导入

调用后端方法

<!-- 导入弹出框 -->
<el-upload ref="upload" class="upload-demo" accept=".xlsx, .xls" 
:auto-upload="true" :show-file-list="false"
:headers="headers"
:on-success="handleSuccess"
:action="uploadTemplatePath"> 
  <el-button type="primary" >导入Excel</el-button>
</el-upload>

引用令牌

import { getToken } from ‘@/utils/auth’ // get token from cookie

在data属性值添加接口名

uploadTemplatePath: process.env.VUE_APP_BASE_API + ‘/assetvehicle/import’

在计算函数中使用令牌

computed: {
headers() {
      return {
        access_token: getToken()
      }
    }
 }