利用form.submit提交表单导出文件到客户端浏览器, 提示下载!

本来是想利用ajax提交json数据到服务端, 让服务端生成一个excel文件并提示客户端浏览器下载的. 但是搞了很久发现ajax方式是无法触发浏览器弹出文件下载的.

网上很多的方案都是说利用form提交, 还有就是纯客户端js去生成excel文件. 这两种方案都是可行的, 今天只演示第一种.

浏览器上展示了一堆数据, 有个按钮是导出按钮,点击后触发一个事件, 提交数据到服务端, 由服务端来生成excel文件流并提示浏览器下载!

按钮的点击:

onExportExcel = () => {

    ....... 这里准备好需要提交到服务端的数据

    const inputs = {
      data,
      header,
      columnWidth,
      filename,
    };

    this.exportExcel('/xx1/xx2/exportExcel', inputs);
  }

  exportExcel(url, data)     // 导出数据到excel文件
  {
    const form = document.createElement('form');
    form.style = "display:none;";
    form.method = "post";
    form.action = url;

    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'values';
    input.value = Base64.encode(JSON.stringify(data));

    form.appendChild(input);
    $('body').append(form);

    form.submit();
    form.remove();
  }

 这里用了一个Base64.encode()接口(下载), 这里是关键, 因为普通的input表单一般是用于传递字符串的, 但是因为我这里要传递的是一个object对象(也可认为是json数据), 所以我就想到了将json序列化后并base64编码下(不编码的话, 服务端接收到的值有可能json_decode会失败).  ==> 所以服务端在接收时要采取相反的方向先base64_decode, 再调用json_decode才能得到原始的json数据!

服务端代码(php, thinkcmf5.0):

public function exportExcel()
    {
        $values = request()->post('values');
        $values = base64_decode($values);

        $list = json_decode($values, true);
        if(!$list)
        {
            _return(1, '没有数据, 无法导出到文件');
        }

        log_message($list);

        $data = $list['data'];
        $header = $list['header'];
        $columnWidth = $list['columnWidth'];
        $filename = $list['filename'];

        if (empty($data) || empty($header) || empty($filename)) {
            $this->success('success');
            return;
        }

        ExcelModule::exportFile($data, $header, $columnWidth, $filename);
    }

 ExcelModule::exportFile是我自已写的一个类, 封装的一个静态接口函数

class ExcelModule
{
    /**
     * 导出数据到excel文件并提供下载
     * @param array $data
     * @param array $fileheader
     * @param array $columnWidth
     * @param $savefile
     * @param string $sheetname
     * @throws PHPExcel_Exception
     * @throws PHPExcel_Reader_Exception
     * @throws PHPExcel_Writer_Exception
     */
    public static function exportFile(array $data, array $fileheader, array $columnWidth, $savefile, $sheetname = 'MySheet')
    {
        Vendor('PHPExcel.PHPExcel.IOFactory');
        $excel = new PHPExcel();
        //防止中文命名，下载时ie9及其他情况下的文件名称乱码
//        iconv('UTF-8', 'GB2312', $savefile);
        $objActSheet = $excel->getActiveSheet();
        //根据有生成的excel多少列，$letter长度要大于等于这个值
        $letter = array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V');
        //设置当前的sheet
        $excel->setActiveSheetIndex(0);
        //设置sheet的name
        $objActSheet->setTitle($sheetname);
        //设置表头
        for ($i = 0; $i < count($fileheader); $i++) {
            // 单元宽度自适应,1.8.1版本phpexcel中文支持勉强可以，自适应后单独设置宽度无效
            // $objActSheet->getColumnDimension("$letter[$i]")->setAutoSize(true);
            $objActSheet->getColumnDimension("$letter[$i]")->setWidth($columnWidth[$i]);
            // 设置表头值，这里的setCellValue第二个参数不能使用iconv，否则excel中显示false
            $objActSheet->setCellValue("{$letter[$i]}1", $fileheader[$i]);
            // 设置表头字体样式
            $objActSheet->getStyle("{$letter[$i]}1")->getFont()->setName('微软雅黑');
            //设置表头字体大小
            $objActSheet->getStyle("{$letter[$i]}1")->getFont()->setSize(12);
            //设置表头字体是否加粗
            // $objActSheet->getStyle("{$letter[$i]}1")->getFont()->setBold(true);
            //设置表头文字垂直居中
            $objActSheet->getStyle("{$letter[$i]}1")->getAlignment()->setHorizontal(PHPExcel_Style_Alignment::HORIZONTAL_CENTER);
            //设置文字上下居中
            $objActSheet->getStyle("$letter[$i]")->getAlignment()->setVertical(PHPExcel_Style_Alignment::VERTICAL_CENTER);
            //设置表头外的文字垂直居中
            $excel->setActiveSheetIndex(0)->getStyle("$letter[$i]")->getAlignment()->setHorizontal(PHPExcel_Style_Alignment::HORIZONTAL_CENTER);
        }

        $j = 2;
        foreach ($data as $k => $v) {
            $i = 0;
            foreach ($v as $key => $value) {
                $objActSheet->setCellValue($letter[$i] . $j, $value);
                // $objActSheet->getColumnDimension("$letter[$i]")->setAutoSize(true);
                $objActSheet->getColumnDimension("$letter[$i]")->setWidth($columnWidth[$i]);
                $i++;
            }
            $j++;
        }
        header('Content-Type: application/vnd.ms-excel');
        //下载的excel文件名称，为Excel5，后缀为xls，不过影响似乎不大
        header('Content-Disposition: attachment;filename="' . $savefile . '.xls"');
        header('Cache-Control: max-age=0');
        // 用户下载excel
        $objWriter = PHPExcel_IOFactory::createWriter($excel, 'Excel2007');
        $objWriter->save('php://output');
        exit;
    }
}

我这个php服务端是thinkcmf5.0框架下的, 包含了很多现成的库!

最终效果: