php vue elementUI 实现zip,excel,图片等导出功能

5 篇文章 0 订阅
4 篇文章 0 订阅

php vue elementUI 实现zip,excel,图片等导出功能

1.HTML:导出模板和数据按钮

 <el-button type="success" v-if="canImport" @click="export(true)" :disabled="disableExportTemplateBtn">导出模板</el-button>
 <el-button type="success" v-if="canExport" @click="export(false)" :disabled="disableExportDataBtn">导出数据</el-button>
  • v-if根据导入导出权限是否显示按钮
  • @click导出事件
  • :disabled根据导出状态判断按钮是否可点
    2.VUE:导出事件
exportTransformer(isTemplate){
				//判断是否为导出模板,按钮不可点
                if(isTemplate){
                    this.disableExportTemplateBtn = true;
                }
                else{
                    this.disableExportDataBtn = true;
                }
                //传入后台的参数(自行修改相应参数)
                let params = {'Id':this.$route.params.Id,'isTemplate':isTemplate?isTemplate:''};
                //路由地址(自行修改地址)
                let url= '/api/exportMultiple';
                this.APIRequest(
                    url,
                    'get',
                    params,
                    //返回数据类型(数据来源后边介绍)
                    'blob'
                ).then(res => {
                    if(res){
                    	//创建一个a链接
                        const link = document.createElement('a');
                        //根据Blob 对象生成一个url
                        link.href = window.URL.createObjectURL(res.blob);
                        //导出的文件名
                        if(res.fileName){
                            link.download = res.fileName;
                        }
                        //a标签点击
                        link.click();
                        this.$notify.success('导出成功');
                    }else{
                        this.$notify.error('导出失败');
                    }
                    //判断是否为导出模板,按钮可点
                    if(isTemplate){
                        this.disableExportTemplateBtn = false;
                    }
                    else{
                        this.disableExportDataBtn = false;
                    }
                });
            },

3.blob返回数据类型

export const APIRequest = function(url, method, params,responseType){
 let tempData = {
        url: url,
        method: method,
        params: params,
    };
     if(responseType != undefined){
        tempData.responseType = responseType;
    }
    return request(tempData);
};

在axios的request.js中

service.interceptors.response.use(
    response => {
        if (response.status === 200) {
        //判断如果数据类型为blob,获取文件名和返回的相应数据
            if(response.request.responseType == 'blob'){
                let disposition = response.headers['content-disposition'];
                let fileName = decodeURI(disposition.substring(disposition.indexOf('filename="')+10, disposition.length-1));
                return {fileName: fileName, blob:response.data};
            }
            return response.data;
        } else {
            Promise.reject();
        }
    },
);

4.PHP:control层和model层

//control
public function exportMultiple(Request $request){
	$id=$request->input('Id', false);
	$isTemplate=$request->input('isTemplate', true);
	$data=getData($id);
	$exportName='自定义名称'.date('YmdHis', time());
	$export=new ExportMultipleData();
    $export->exportMultiple($data,$isTemplate,$exportName);
}
//model 批量导出数据(简化版,根据导出格式自行调整数据格式)
    public function exportMultiple($data=[],$isTemplate=true, $exportName='测试文件'){
        $excelDatas = [];//填写数据的单元格
        $excelCellDatas = [];//显示的单元格
        $images = [];//图片文件
        $borders = [];//边框范围
        foreach ($data['experimentData'] as $experimentKey=>$experiment){
            $sheetName = '下边每个sheet标题的名称';
            $excelCellDatas[$sheetName] = [];
            $excelDatas[$sheetName] = [];
            $borders[$sheetName] = [];
            //从第三行开始
            $nowRow = 3;
            //MultipleField最多的列数
            $colMax=0;
            //从B列开始
            $nowCol=1;
            foreach ($experiment['experimentConfig']['fields'] as $fieldKey => $field){
                $nowRow++;
                $titleContent=$field['name'];
                $excelCellDatas[$sheetName][colNum2colLetter($nowCol)][$nowRow]=getExcelTitleStyle($titleContent);
                $nowCol++;
              if($field['type']=='Upload'){
                    $uploadPath='';
                   if(!empty($experiment['experimentFiles'][$fieldKey][0])){
                       $uploadPath=$url;//图片的地址
                   }
                    $dataContent=$sheetName.'|'.$uploadPath;
                    if(!$isTemplate){
                        $images[$sheetName][$field['name']]=$uploadPath;
                    }
                }else{
                    $dataContent=$experiment['experimentData'][$fieldKey];
                }
                $dataContent=$isTemplate? '':$dataContent;
                $excelCellDatas[$sheetName][colNum2colLetter($nowCol)][$nowRow]=getExcelContentStyle($dataContent);
                $excelDatas[$sheetName]['data_'.$nowRow.'_'.$nowCol]=colNum2colLetter($nowCol).$nowRow;
                $borders[$sheetName][]=colNum2colLetter($nowCol-1).$nowRow.':'.colNum2colLetter($nowCol).$nowRow;
                $nowCol++;
            }
            $excelCellDatas[$sheetName]['B']['2']=getExcelMainTitleStyle($sheetName,colNum2colLetter($colMax) . '2');
            $allData = [
                'excelCellDatas' => $excelCellDatas,
                'excelDatas' => $excelDatas,
                'images' => $images,
                'borders' => $borders
            ];
        }
        if(empty($images)){
            createExcelFile($allData, $exportName);
        }else{
            getZipFile($allData,$exportName);
        }
    }
    //将数字转换成excel的列号(如:A,B,AA等)
        function colNum2colLetter($num){
        $cols = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        if($num > 25){
            $num1 = (int)($num / 25);
            $num2 = (int)($num % 25);
            return $cols[$num1].$cols[$num2];
        }
        return $cols[$num];
    }
    //获取excel表中内容相应的样式和内容(getExcelTitleStyle和getExcelMainTitleStyle根据实际情况自行调整样式)
     function getExcelContentStyle($name){
        return [
            'content' => $name,
            'style' => [
                'fontSize' => '10',
                'width' =>'20',
                'valignment' => 'center',
                'alignment' => 'center',
            ]
        ];
    }
   //没有图片,只有excel表的$allData(例子,有图片的只需在$images添加相应的图片地址即可)
   Array
(
    [excelCellDatas] => Array
        (
            [测试数据] => Array
                (
                    [B] => Array
                        (
                            [3] => Array
                                (
                                    [content] => 绕组1
                                    [style] => Array
                                        (
                                            [fontSize] => 10
                                            [width] => 20
                                            [bold] => 1
                                            [valignment] => center
                                            [alignment] => center
                                            [autoSize] => 1
                                        )

                                )

                            [4] => Array
                                (
                                    [content] => 1
                                    [style] => Array
                                        (
                                            [fontSize] => 10
                                            [width] => 20
                                            [valignment] => center
                                            [alignment] => center
                                        )

                                )

                            [2] => Array
                                (
                                    [content] => 测试数据
                                    [style] => Array
                                        (
                                            [fontSize] => 20
                                            [height] => 80
                                            [width] => 20
                                            [bold] => 1
                                            [valignment] => center
                                            [alignment] => center
                                            [mergeEnd] => I2
                                        )

                                )

                        )

                    [C] => Array
                        (
                            [3] => Array
                                (
                                    [content] => 分接1
                                    [style] => Array
                                        (
                                            [fontSize] => 10
                                            [width] => 20
                                            [bold] => 1
                                            [valignment] => center
                                            [alignment] => center
                                            [autoSize] => 1
                                        )

                                )

                            [4] => Array
                                (
                                    [content] => 2
                                    [style] => Array
                                        (
                                            [fontSize] => 10
                                            [width] => 20
                                            [valignment] => center
                                            [alignment] => center
                                        )

                                )

                        )

                    [D] => Array
                        (
                            [3] => Array
                                (
                                    [content] => 电压 (V)
                                    [style] => Array
                                        (
                                            [fontSize] => 10
                                            [width] => 20
                                            [bold] => 1
                                            [valignment] => center
                                            [alignment] => center
                                            [autoSize] => 1
                                        )

                                )

                            [4] => Array
                                (
                                    [content] => 3
                                    [style] => Array
                                        (
                                            [fontSize] => 10
                                            [width] => 20
                                            [valignment] => center
                                            [alignment] => center
                                        )

                                )

                        )

                    [E] => Array
                        (
                            [3] => Array
                                (
                                    [content] => 绕组2
                                    [style] => Array
                                        (
                                            [fontSize] => 10
                                            [width] => 20
                                            [bold] => 1
                                            [valignment] => center
                                            [alignment] => center
                                            [autoSize] => 1
                                        )

                                )

                            [4] => Array
                                (
                                    [content] => 4
                                    [style] => Array
                                        (
                                            [fontSize] => 10
                                            [width] => 20
                                            [valignment] => center
                                            [alignment] => center
                                        )

                                )

                        )

                    [F] => Array
                        (
                            [3] => Array
                                (
                                    [content] => 分接2
                                    [style] => Array
                                        (
                                            [fontSize] => 10
                                            [width] => 20
                                            [bold] => 1
                                            [valignment] => center
                                            [alignment] => center
                                            [autoSize] => 1
                                        )

                                )

                            [4] => Array
                                (
                                    [content] => 5
                                    [style] => Array
                                        (
                                            [fontSize] => 10
                                            [width] => 20
                                            [valignment] => center
                                            [alignment] => center
                                        )

                                )

                        )

                    [G] => Array
                        (
                            [3] => Array
                                (
                                    [content] => 电压 (V)
                                    [style] => Array
                                        (
                                            [fontSize] => 10
                                            [width] => 20
                                            [bold] => 1
                                            [valignment] => center
                                            [alignment] => center
                                            [autoSize] => 1
                                        )

                                )

                            [4] => Array
                                (
                                    [content] => 6
                                    [style] => Array
                                        (
                                            [fontSize] => 10
                                            [width] => 20
                                            [valignment] => center
                                            [alignment] => center
                                        )

                                )

                        )

                    [H] => Array
                        (
                            [3] => Array
                                (
                                    [content] => 计算比值
                                    [style] => Array
                                        (
                                            [fontSize] => 10
                                            [width] => 20
                                            [bold] => 1
                                            [valignment] => center
                                            [alignment] => center
                                            [autoSize] => 1
                                        )

                                )

                            [4] => Array
                                (
                                    [content] => 7
                                    [style] => Array
                                        (
                                            [fontSize] => 10
                                            [width] => 20
                                            [valignment] => center
                                            [alignment] => center
                                        )

                                )

                        )

                    [I] => Array
                        (
                            [3] => Array
                                (
                                    [content] => 实测偏差 (%)
                                    [style] => Array
                                        (
                                            [fontSize] => 10
                                            [width] => 20
                                            [bold] => 1
                                            [valignment] => center
                                            [alignment] => center
                                            [autoSize] => 1
                                        )

                                )

                            [4] => Array
                                (
                                    [content] => 8
                                    [style] => Array
                                        (
                                            [fontSize] => 10
                                            [width] => 20
                                            [valignment] => center
                                            [alignment] => center
                                        )

                                )

                        )

                )

        )

    [excelDatas] => Array
        (
            [测试数据] => Array
                (
                    [data_4_1] => B4
                    [data_4_2] => C4
                    [data_4_3] => D4
                    [data_4_4] => E4
                    [data_4_5] => F4
                    [data_4_6] => G4
                    [data_4_7] => H4
                    [data_4_8] => I4
                )

        )

    [images] => Array
        (
        )

    [borders] => Array
        (
            [测试数据] => Array
                (
                    [0] => B3:I4
                )

        )

)

5.最终导出excel表和zip(由于文章太多了,Excel类和ZipArchive类自行引入)

 function createExcelFile($allData, $fileName, $store = false)
    {
        if (stripos($_SERVER['SystemRoot'], 'windows') !== false) {
            $fileName = urlencode($fileName);
        }
        $excelFile = Excel::create($fileName, function ($excel) use ($allData) {
            $excelCellDatas = $allData['excelCellDatas'];
            $borders = $allData['borders'];
            $excelDatas = $allData['excelDatas'];
            foreach ($excelCellDatas as $sheetName => $createSheet) {
                $excelSheetDatas = isset($excelDatas[$sheetName]) ? $excelDatas[$sheetName] : [];
                if (is_numeric($sheetName)) {
                    $sheetName = "$sheetName";
                }
                $excel->sheet($sheetName, function ($sheet) use ($createSheet, $borders, $excelSheetDatas, $sheetName) {//某表格数据,边框参数,设置颜色区域,表格标题
                    $rowMax=0;
                    foreach ($createSheet as $col => $rows) {
                        $colMaxContentLen = 0;
                        foreach ($rows as $row => $cellData) {
                           if($row.$col!='2B'){
                               $colMaxContentLen = max($colMaxContentLen, strlen($cellData['content']));
                           }
                            if (isset($cellData['style'])) {
                                if (isset($cellData['style']['width']) || isset($cellData['style']['height'])) {
                                    $width = isset($cellData['style']['width']) ? (int)$cellData['style']['width'] : 8.43;
                                    $height = isset($cellData['style']['height']) ? (int)$cellData['style']['height'] : 15;
                                    $sheet->setSize($col . $row, $width, $height);
                                }
                                if (isset($cellData['style']['mergeEnd'])) {
                                    $sheet->mergeCells($col . $row . ':' . $cellData['style']['mergeEnd']);
                                }
                            }
                            $sheet->cell($col . $row, function ($cell) use ($cellData, $sheet, $excelSheetDatas, $col, $row) {
                                if (isset($cellData['style']['fontSize'])) {
                                    $cell->setFontSize((int)$cellData['style']['fontSize']);
                                }
                                if (isset($cellData['style']['bold']) && $cellData['style']['bold'] != 0) {
                                    $cell->setFontWeight();
                                }
                                if (in_array($col . $row, $excelSheetDatas)) {
                                    $cell->setBackground('#99CCFF');
                                }
                                $isImage = false;
                                $cellContentArray = explode('|', $cellData['content']);
                                if ($cellContentArray[0] != $cellData['content']) {
                                    if (isset($cellContentArray[1]) && strstr($cellContentArray[1], '/uploads/') !== false) {
                                        $imgName=explode('/',$cellContentArray[1]);
                                        $imgName=end($imgName);
                                        $cell->setValue($cellContentArray[0].DIRECTORY_SEPARATOR.$imgName);
                                        $isImage = true;
                                    }
                                }
                                if ($isImage === false) {
                                    $sheet->getCell($cell->cells)->setValueExplicit($cellData['content'], PHPExcel_Cell_DataType::TYPE_STRING);
                                }
                                if (isset($cellData['style'])) {
                                    if (isset($cellData['style']['alignment'])) {
                                        $cell->setAlignment($cellData['style']['alignment']);
                                    }
                                    if (isset($cellData['style']['valignment'])) {
                                        $cell->setValignment($cellData['style']['valignment']);
                                    }
                                }
                            });
                            $rowMax=max((int)$row,$rowMax);
                        }
                        foreach($rows as  $row => $cellData){
                            $autoSize = isset($cellData['style']['autoSize']) && $cellData['style']['autoSize'];
                            if($autoSize) {
                                $sheet->setSize($col . $row, $colMaxContentLen * 0.8, $height);
                            }
                        }
                    }
                    $sheet->mergeCells('B'.($rowMax+1) .':B'.($rowMax+1));
                    foreach ($borders[$sheetName] as $border) {
                        $leftBorder = false;
                        $rightBorder = false;
                        $borderArray = explode(':', $border);
                        $borderArray[1] = isset($borderArray[1]) ? $borderArray[1] : $borderArray[0];
                        preg_match('/([A-Z]{1,})(\d{1,})/', $borderArray[0], $left);
                        preg_match('/([A-Z]{1,})(\d{1,})/', $borderArray[1], $right);
                        if (isset($left[2]) && isset($right[2])) {
                            $leftBorder = $left[1] . $left[2] . ':' . $left[1] . $right[2];
                            $rightBorder = $right[1] . $left[2] . ':' . $right[1] . $right[2];
                        }
                        $sheet->getStyle($border)->applyFromArray([
                            'borders' => [
                                'inside' => ['style' => 'thin'],
                                'top' => ['style' => 'medium'],
                                'bottom' => ['style' => 'medium'],
                                'left' => ['style' => $leftBorder ? 'medium' : 'thin'],
                                'right' => ['style' => $rightBorder ? 'medium' : 'thin'],
                            ]
                        ]);
                    }
                });
            }
        });

        if ($store === false) {
            $excelFile->export('xls');
            return true;
        }
        if ($store) {
            $excelFile->store('xls', storage_path('temp'));
            return true;
        }
        return false;
    }
     function getZipFile($allData = [], $name = '测试文件')
    {
        $downloadFileName = $name .'.zip';
        $fileName = date('YmdHis');
        if (createExcelFile($allData, $fileName, true)) {
            $zipFile = new ZipArchive();
            $zipFileName = $fileName . '.zip';
            $zipFilePath = storage_path('temp') . DIRECTORY_SEPARATOR . $zipFileName;
            if (is_file($zipFilePath)) {
                @unlink($zipFilePath);
            }
            if ($zipFile->open($zipFilePath, ZipArchive::CREATE) === true) {
                $excelFileName = $fileName . '.xls';
                if (stripos($_SERVER['SystemRoot'], 'windows') !== false) {
                    $excelFileName = iconv('UTF-8', 'GB2312//IGNORE', $fileName) . '.xls';
                }
                $zipFile->addFile(storage_path('temp') . DIRECTORY_SEPARATOR . $excelFileName, $name. '.xls');
                foreach ($allData['images'] as $imagePath => $images) {
                    foreach ($images as $imageName => $image) {
                        $image = str_replace('/uploads/', '', $image);
                        if (is_file(public_path('uploads') . DIRECTORY_SEPARATOR . $image)) {
                            $exportImageName=explode('/',$image);
                            $zipFile->addFile(public_path('uploads') . DIRECTORY_SEPARATOR . $image, $imagePath . '/' . end($exportImageName));
                        }
                    }
                }
                $zipFile->close();
                ob_end_clean();
                $downloadFileName = urlencode($downloadFileName);
                header("Content-Type: application/force-download");//告诉浏览器强制下载
                header("Content-Transfer-Encoding: binary");//声明一个下载的文件
                header('Content-Type: application/zip');//设置文件内容类型为zip
                header('Content-Disposition:attachment;filename="'.$downloadFileName.'"');//声明文件名
                header('Content-Length: ' . filesize($zipFilePath));//声明文件大小
                error_reporting(0);
                readfile($zipFilePath);
                flush();
                exit;
            }
        }
    }
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 可以使用第三方库 "vue-element-admin-migrat" 来实现 vue + element-ui 表格导出excel功能。具体实现方法为: 1. 安装 "vue-element-admin-migrat" 库 2. 在 main.js 中引入并使用该库 3. 在需要导出excel的组件中,使用 this.$exportCsv(data, filename) 方法,其中 data 为需要导出的数据,filename 为导出文件名。 具体细节可以参考该库的文档和示例代码。 ### 回答2: Vue是一款流行的JavaScript框架,它提供了许多方便的工具来帮助开发人员创建交互式Web应用程序。ElementUIVue的一种UI框架,它提供了一系列的可复用组件,包括表格、表单、导航、弹窗、布局等等。VueElementUI相结合,使得开发人员能够轻松地创建出功能强大、美观易用的Web应用程序。 在Vue ElementUI中,表格功能是非常重要的,因为它能够展示大量的数据,并且让用户可以方便地进行数据的筛选、查询、排序等操作。同时,导出表格也是一个非常重要的功能,因为它能够帮助用户在Excel中方便地进行数据分析和处理。 下面是一个简单的Vue ElementUI表格导出Excel的例子: 步骤一:安装依赖 我们需要先安装以下依赖: - file-saver:用于将数据保存为Excel文件。 - xlsx:用于将数据转换为Excel格式。 运行以下命令来安装这两个依赖: ``` npm install file-saver xlsx --save ``` 步骤二:创建表格组件 我们可以使用ElementUI的`el-table`组件来创建一个表格。下面是一个简单的例子: ``` <template> <div> <el-table :data="tableData"> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> <el-table-column label="性别" prop="gender"></el-table-column> </el-table> <el-button type="primary" @click="exportTable">导出Excel</el-button> </div> </template> <script> import { saveAs } from 'file-saver'; import XLSX from 'xlsx'; export default { data() { return { tableData: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 22, gender: '女' }, { name: '王五', age: 30, gender: '男' }, { name: '赵六', age: 25, gender: '女' }, ] }; }, methods: { exportTable() { const data = this.formatJson(this.tableData); const ws = XLSX.utils.json_to_sheet(data); const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'table.xlsx'); }, formatJson(filterVal, jsonData) { // 处理数据,使数据格式更符合Excel的格式要求 return jsonData.map(v => filterVal.map(j => v[j])); } } }; </script> ``` 在这个例子中,我们先定义了一个包含几个人的表格数据,然后使用`el-table`组件来展示这些数据。在`button`上绑定了`exportTable`方法,当用户点击这个按钮时,会调用`exportTable`方法进行导出Excel。 步骤三:导出Excel 在`exportTable`方法中,我们首先调用了`formatJson`方法,将表格数据进行处理。这个方法会将表格数据转换为Excel需要的二维数组格式。例如,上面例子中的表格数据会被处理成下面这样的数组: ``` [ ['姓名', '年龄', '性别'], ['张三', 18, '男'], ['李四', 22, '女'], ['王五', 30, '男'], ['赵六', 25, '女'], ] ``` 然后,我们使用`xlsx`库将这个数组转换为一个Excel工作簿对象。接着,我们将这个工作簿对象写入一个Blob对象中,并使用`file-saver`库将它保存为一个Excel文件。最后,我们会在浏览器中弹出下载对话框,用户可以选择保存Excel文件到本地。 总结 Vue ElementUI表格导出Excel不是一个特别复杂的功能,我们可以轻松地使用开源库和一些简单的JavaScript代码来实现它。开发人员可以根据自己的需要进行调整和扩展,例如设置表格的列宽、样式等,以便更好地满足应用程序的需求。 ### 回答3: VueElement UI都是非常流行的前端库,提供了许多实用的组件和工具。其中,Element UI的表格组件非常强大,支持多种操作和功能,包括导出Excel。下面将会介绍如何在Vue项目中使用Element UI的表格组件来导出Excel文件。 首先,我们需要安装Element UI组件库。可以使用npm在命令行中执行以下命令进行安装: ``` npm install element-ui --save ``` 安装完成后,在Vue项目的入口文件中引入Element UI组件: ```js import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 接下来,我们需要创建一个表格并填充数据。在这里,我们使用Element UI的el-table组件。可以参考以下代码: ```html <el-table :data="tableData"> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> <el-table-column label="性别" prop="gender"></el-table-column> </el-table> ``` 其中,tableData是一个数组,包含了表格中的数据。可以在Vue的data选项中定义: ```js data() { return { tableData: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 22, gender: '女' }, { name: '王五', age: 25, gender: '男' }, { name: '赵六', age: 18, gender: '女' }, ] } } ``` 现在,我们已经有了一个简单的表格。接下来,让我们来处理导出Excel的逻辑。 Element UI提供了一个el-button组件,可以添加一个按钮,点击后执行导出Excel的操作。可以参考以下代码: ```html <el-button type="primary" @click="exportExcel">导出Excel</el-button> ``` 其中,@click绑定了一个名为exportExcel的方法。在Vue实例中定义这个方法: ```js methods: { exportExcel() { import('@/vendor/Export2Excel').then(excel => { const tHeader = ['姓名', '年龄', '性别'] const filterVal = ['name', 'age', 'gender'] const data = this.formatJson(filterVal, this.tableData) excel.export_json_to_excel({ header: tHeader, data, filename: 'table.xls', autoWidth: true, bookType: 'xls' }) }) }, formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) } } ``` 上面的代码中,我们先引入了一个Export2Excel的js文件,来处理导出Excel的逻辑。这个文件可以在网上找到,我就不在这里赘述。 然后,我们定义了两个变量tHeader和filterVal,用于设置Excel文件的表头和需要导出的字段。tHeader是一个数组,包含了表格中每一列的标题;filterVal是一个数组,包含了需要导出的字段。 接着,我们调用了一个名为formatJson的方法,将tableData中的数据转换成符合导出要求的数据。这个方法的实现很简单,就是利用map方法从每一个对象中取出指定字段的值,然后返回一个二维数组。 最后,我们通过调用export_json_to_excel方法来导出Excel文件。这个方法需要传入一个配置对象,包含了各种导出选项。其中,header是表头数组,data是需要导出的数据,filename是文件名,autoWidth表示是否自动计算列宽,bookType表示导出文件的类型。 至此,我们已经完成了VueElement UI的表格导出Excel功能。这个功能非常实用,可以让我们方便地将表格中的数据导出Excel中,进行更多的分析和处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值