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

最新推荐文章于 2023-09-12 15:35:31 发布

baby_dewo

最新推荐文章于 2023-09-12 15:35:31 发布

阅读量862

点赞数 1

分类专栏： vue elementUI php 文章标签： excel php javascript vue.js zip

本文链接：https://blog.csdn.net/baby_dewo/article/details/109023321

版权

vue 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

elementUI

5 篇文章 0 订阅

订阅专栏

php

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层

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;
            }
        }
    }

baby_dewo

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
php vue elementUI 实现zip，excel，图片等导出功能

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)"
复制链接

扫一扫