在Vue项目中引入和使用js-xlsx库来处理Excel文件的导入和导出功能，可以按照以下步骤进行操作：

  1. 安装js-xlsx库： 在Vue项目的根目录下，使用npm或yarn安装xlsx库：

    bash
    npm install xlsx yarn add xlsx

  2. 创建导出Excel的函数： 在src目录下创建一个新文件excel.js，并添加以下代码来定义导出Excel的功能：


    import * as XLSX from "xlsx"; export function exportToExcel(data, filename = "data.xlsx") { const worksheet = XLSX.utils.json_to_sheet(data); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); XLSX.writeFile(workbook, filename); }

  3. 在Vue组件中使用导出功能： 在需要添加导出功能的Vue组件中，比如src/components/ExportButton.vue，引入exportToExcel函数，并添加一个按钮来触发导出：


    <template> <button @click="handleExport">导出数据</button> </template> <script> import { exportToExcel } from "@/excel.js"; export default { data() { return { users: [ { name: "John Doe", age: 30, email: "john.doe@example.com" }, { name: "Jane Smith", age: 25, email: "jane.smith@example.com" }, ], }; }, methods: { handleExport() { exportToExcel(this.users, "users.xlsx"); }, }, }; </script>

  4. 创建导入Excel的函数： 在excel.js文件中继续添加以下代码来定义从Excel文件导入数据的功能：


    export function importFromExcel(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = (event) => { const data = new Uint8Array(event.target.result); const workbook = XLSX.read(data, { type: "array" }); const firstSheet = workbook.Sheets[workbook.SheetNames[0]]; const result = XLSX.utils.sheet_to_json(firstSheet, { header: 1 }); resolve(result); }; reader.onerror = (error) => reject(error); reader.readAsArrayBuffer(file); }); }

  5. 在Vue组件中使用导入功能： 在需要添加导入功能的Vue组件中，比如src/components/ImportButton.vue，引入importFromExcel函数，并添加一个文件输入框来触发导入：


    <template> <div> <input type="file" @change="handleFileChange" /> <ul> <li v-for="(user, index) in users" :key="index">{{ user }}</li> </ul> </div> </template> <script> import { importFromExcel } from "@/excel.js"; export default { data() { return { users: [] }; }, methods: { handleFileChange(event) { const file = event.target.files[0]; importFromExcel(file) .then((data) => { this.users = data; }) .catch((error) => { console.error("导入失败", error); }); }, }, }; </script>