Vue项目导入导出文件功能以及导出文件后乱码问题及解决

下面是Vue项目导入导出文件功能以及乱码问题及解决的完整攻略。

1. Vue项目导入导出文件功能的实现思路

在Vue项目中，我们可以使用FileSaver.js 实现文件的导出。而文件的导入则需要使用HTML5 File API。具体实现思路如下：

1. 首先确保引入了FileSaver.js库，可以使用npm包管理器进行安装：

   bash
npm install file-saver --save

2. 创建一个方法，用于将数据导出到CSV或者Excel文件中。该方法接收一个数据和一个文件名作为参数，并使用FileSaver.js库创建一个Blob对象并将其下载到本地磁盘。

   javascript
exportCsv(data, fileName) {
let csvData = "data:text/csv;charset=utf-8," + data;
let csvBlob = new Blob([csvData], { type: "text/csv;charset=utf-8" });
FileSaver.saveAs(csvBlob, fileName);
}

3. 在HTML中创建一个input元素，该元素用于上传文件。当用户选择了一个文件时，我们可以解析该文件并将其内容映射到我们的Vue组件中。

   html
<input type="file" @change="importCsv($event)" />

4. 创建一个方法，用于将CSV或者Excel文件导入到Vue组件中。该方法接收一个事件对象作为参数，通过该事件对象可以获取上传的文件并读取其内容。

   javascript
importCsv(event) {
let file = event.target.files[0];
let reader = new FileReader();
reader.onload = (e) => {
let data = e.target.result;
// 这里将data映射到Vue组件中的data属性中
};
reader.readAsText(file);
}

2. 导出文件后乱码问题及解决方法

在使用上述方法将数据导出到CSV或者Excel文件中时，有时候会遇到导出的文件内容出现乱码的问题。这是因为浏览器将数据按照默认编码（通常是ISO-8859-1）进行了编码，而导出的文件中每个字符都只使用了一个字节，所以导致了乱码的问题。

为了解决这个问题，我们需要将数据按照UTF-8编码进行编码。具体方法如下：

1. 通过将数据的每个字符转换成UTF-8编码的形式，将数据转换为UTF-8格式。

   javascript
function utf8Encode(data) {
let result = "";
for (let i = 0; i < data.length; i++) {
let c = data.charCodeAt(i);
if (c < 128) {
result += String.fromCharCode(c);
} else if (c > 127 && c < 2048) {
result += String.fromCharCode((c >> 6) | 192);
result += String.fromCharCode((c & 63) | 128);
} else {
result += String.fromCharCode((c >> 12) | 224);
result += String.fromCharCode(((c >> 6) & 63) | 128);
result += String.fromCharCode((c & 63) | 128);
}
}
return result;
}

2. 在导出文件的方法中，将数据转换为UTF-8编码的形式：

   javascript
let csvData = "data:text/csv;charset=utf-8," + utf8Encode(data);
let csvBlob = new Blob([csvData], { type: "text/csv;charset=utf-8" });
FileSaver.saveAs(csvBlob, fileName);

这样，即可避免导出文件时出现乱码的问题。

示例说明：

下面是两个示例，一个是将数据导出到Excel文件中，另一个是将CSV文件导入到Vue组件中。这里假定我们的数据格式为一个数组，每个元素包含单元格的数据。

示例1：导出Excel文件

<template>
  <button @click="exportToExcel()">Export as Excel</button>
</template>

<script>
import FileSaver from "file-saver";

export default {
  data() {
    return {
      dataList: [
        ["Name", "Age", "Gender"],
        ["Tom", 20, "Male"],
        ["Lucy", 22, "Female"],
        ["John", 18, "Male"],
      ],
    };
  },
  methods: {
    exportToExcel() {
      let xlsContent = "";
      this.dataList.forEach((row) => {
        let rowData = "";
        row.forEach((cell) => {
          rowData += cell + "\t";
        });
        xlsContent += rowData + "\n";
      });

      const fileName = "data.xls";
      let xlsData = "data:application/vnd.ms-excel;charset=utf-8," + xlsContent;
      let xlsBlob = new Blob([xlsData], { type: "application/vnd.ms-excel;charset=utf-8" });
      FileSaver.saveAs(xlsBlob, fileName);
    },
  },
};
</script>

示例2：导入CSV文件

<template>
  <div>
    <input type="file" @change="importCsv($event)" accept=".csv">
    <table>
      <thead>
        <tr>
          <th v-for="(headerItem, index) in headerList" :key="index">{{ headerItem }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(rowData, rowIndex) in dataList" :key="rowIndex">
          <td v-for="(cellData, cellIndex) in rowData" :key="cellIndex">{{ cellData }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headerList: [],
      dataList: [],
    };
  },
  methods: {
    importCsv(event) {
      let file = event.target.files[0];
      let reader = new FileReader();
      reader.onload = (e) => {
        let data = e.target.result;
        let rows = data.split("\n");
        this.headerList = rows[0].split(",");
        this.dataList = rows.slice(1).map((row) => row.split(","));
      };
      reader.readAsText(file);
    },
  },
};
</script>