PHP结合vue导出excel出现乱码的解决方法分享

下面是“PHP结合vue导出excel出现乱码的解决方法分享”的完整使用攻略，包括问题原因、解决方法和两个示例说明。

问题原因

在PHP结合vue导出excel时，如果文件中包含中文字符，可能会出现乱码的问题。这是因为Excel文件默认使用的编码格式是UTF-8，而PHP默认使用的编码格式是ISO-8859-1，两者不兼容导致的。

解决方法

以下是解决PHP结合vue导出excel出现乱码的方法：

1. 在PHP中设置编码格式

在PHP中，可以使用header函数设置编码格式为UTF-8，以确保生成的Excel文件使用UTF-8编码。

header('Content-Type: application/vnd.ms-excel; charset=UTF-8');

1. 在vue中设置请求头

在vue中，可以使用axios的headers属性设置请求头，以确保发送的数据使用UTF-8编码。

axios.post('/export', data, {
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    }
}).then(response => {
    // 处理响应数据
}).catch(error => {
    // 处理错误
});

示例：使用PHP结合vue导出excel

以下是一个使用PHP结合vue导出excel的示例：

1. 创建一个PHP脚本

首先，创建一个PHP脚本，用于接收vue发送的数据，并生成Excel文件。

header('Content-Type: application/vnd.ms-excel; charset=UTF-8');
header('Content-Disposition: attachment; filename="example.xlsx"');

$data = json_decode(file_get_contents('php://input'), true);

$spreadsheet = new \PhpOffice\PhpSpreadsheet\Spreadsheet();
$sheet = $spreadsheet->getActiveSheet();

// 设置表头
$sheet->setCellValue('A1', '姓名');
$sheet->setCellValue('B1', '年龄');
$sheet->setCellValue('C1', '性别');

// 填充数据
$row = 2;
foreach ($data as $item) {
    $sheet->setCellValue('A' . $row, $item['name']);
    $sheet->setCellValue('B' . $row, $item['age']);
    $sheet->setCellValue('C' . $row, $item['gender']);
    $row++;
}

$writer = new \PhpOffice\PhpSpreadsheet\Writer\Xlsx($spreadsheet);
$writer->save('php://output');

这个脚本接收vue发送的数据，使用PhpSpreadsheet库生成Excel文件，并将文件发送给浏览器下载。

1. 创建一个vue组件

接下来，创建一个vue组件，用于发送数据到PHP脚本，并接收生成的Excel文件。

<template>
  <div>
    <button @click="exportExcel">导出Excel</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    exportExcel() {
      axios.post('/export', [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 22, gender: '女' },
        { name: '王五', age: 25, gender: '男' }
      ], {
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        },
        responseType: 'blob'
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'example.xlsx');
        document.body.appendChild(link);
        link.click();
      }).catch(error => {
        console.log(error);
      });
    }
  }
};
</script>

这个组件包含一个按钮，点击按钮后会发送数据到PHP脚本，并接收生成的Excel文件。使用axios的responseType属性设置响应类型为blob，以便接收二进制数据。最后，将生成的Excel文件作为Blob对象下载到本地。

示例：使用PHP结合vue导出csv

以下是一个使用PHP结合vue导出csv的示例：

1. 创建一个PHP脚本

首先，创建一个PHP脚本，用于接收vue发送的数据，并生成CSV文件。

header('Content-Type: text/csv; charset=UTF-8');
header('Content-Disposition: attachment; filename="example.csv"');

$data = json_decode(file_get_contents('php://input'), true);

$output = fopen('php://output', 'w');

// 写入表头
fputcsv($output, ['姓名', '年龄', '性别']);

// 写入数据
foreach ($data as $item) {
    fputcsv($output, [$item['name'], $item['age'], $item['gender']]);
}

fclose($output);

这个脚本接收vue发送的数据，使用fputcsv函数生成CSV文件，并将文件发送给浏览器下载。

1. 创建一个vue组件

接下来，创建一个vue组件，用于发送数据到PHP脚本，并接收生成的CSV文件。

<template>
  <div>
    <button @click="exportCsv">导出CSV</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    exportCsv() {
      axios.post('/export', [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 22, gender: '女' },
        { name: '王五', age: 25, gender: '男' }
      ], {
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        },
        responseType: 'blob'
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'example.csv');
        document.body.appendChild(link);
        link.click();
      }).catch(error => {
        console.log(error);
      });
    }
  }
};
</script>

这个组件包含一个按钮，点击按钮后会发送数据到PHP脚本，并接收生成的CSV文件。使用axios的responseType属性设置响应类型为blob，以便接收二进制数据。最后，将生成的CSV文件作为Blob对象下载到本地。