Use uniapp to implement table export function

Use uniapp to realize the table export function

With the rapid development of the mobile Internet, mobile phones have become one of the indispensable tools in people's daily lives. As developers, we also need to continue to provide more functions and conveniences to meet the needs of users. Among them, the table export function is a common requirement. Users hope to export data to Excel or CSV files for further processing on the computer.

In uniapp, through the use of some components and third-party libraries, we can easily implement the table export function. Specific code examples are given below to help developers get started quickly.

1. IntroductionxlsxLibrary
   In the main.js file of the uniapp project, you can install it through the npm package management toolxlsxLibrary for reading and writing Excel files.

// main.js

import XLSX from 'xlsx'

// 将XLSX实例绑定到Vue的原型上，便于在全局访问
Vue.prototype.$xlsx = XLSX

2. Create a table component
   In uniapp, we can use the combination of uni-list and uni-grid components Implement table display. First create a Table component to display data.

<template>
  <view>
    <uni-list>
      <uni-grid :col="headers.length">
        <uni-grid-item v-for="header in headers" :key="header">{{header}}</uni-grid-item>
      </uni-grid>
    </uni-list>
    
    <uni-list>
      <uni-grid :col="headers.length">
        <uni-grid-item v-for="(row, rowIndex) in data" :key="rowIndex">{{row}}</uni-grid-item>
      </uni-grid>
    </uni-list>
    
    <uni-button @click="exportTable">导出表格</uni-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      headers: ['姓名', '年龄', '性别'],
      data: [
        ['张三', 20, '男'],
        ['李四', 25, '女'],
        ['王五', 22, '男'],
      ],
    };
  },
  
  methods: {
    exportTable() {
      // 准备数据
      const sheetData = [this.headers, ...this.data];
      
      // 创建工作薄对象
      const workbook = this.$xlsx.utils.book_new();
      
      // 创建工作表对象
      const worksheet = this.$xlsx.utils.aoa_to_sheet(sheetData);
      
      // 将工作表添加到工作薄中
      this.$xlsx.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      
      // 导出Excel文件
      const xlsContent = this.$xlsx.write(workbook, { type: 'binary' });
      const blobData = new Blob([this.$xlsx.writeFile(workbook, { bookType: 'xlsx', type: 'binary' })], { type: 'application/octet-stream' });
      const downloadUrl = URL.createObjectURL(blobData);
      const link = document.createElement('a');
      link.href = downloadUrl;
      link.download = 'table.xlsx';
      link.click();
    },
  },
};
</script>

3. Use the table component in the page
   Introduce and use the Table component just created in the page where the table needs to be displayed.

<template>
  <view>
    <table></table>
  </view>
</template>

<script>
import Table from '@/components/Table.vue';

export default {
  components: {
    Table,
  },
};
</script>

Through the above code example, we can implement the table export function in uniapp. When the user clicks the "Export Table" button, the data will be exported to an Excel file and automatically downloaded to the user's device. Developers can customize and expand table styles and export functions according to specific needs. I hope the above content is helpful to developers, thank you!

The above is the detailed content of Use uniapp to implement table export function. For more information, please follow other related articles on the PHP Chinese website!