uniapp本地导出表格excel

球球不吃虾

已于 2024-01-22 12:18:33 修改

阅读量3.4k

点赞数 1

分类专栏： uniapp 文章标签： javascript 前端开发语言 uni-app node.js

于 2021-11-03 14:36:17 首次发布

本文链接：https://blog.csdn.net/qq_32594913/article/details/121120382

版权

uniapp 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

文章目录

UniApp中实现本地导出Excel表格的功能
其他思路
- 1. 先把数据组装成wps认识的html格式，就是代码里的template。
- 2. 把这个template保存到手机上。

UniApp中实现本地导出Excel表格的功能

在现代移动应用中，数据导出是一个常见的需求。特别是当用户需要将应用中的数据导出为Excel表格以进行进一步的分析或处理时。UniApp，作为一个跨平台开发框架，允许开发者使用Vue.js编写一次代码并发布到多个平台。本文将详细介绍如何在UniApp中实现本地导出Excel表格的功能。

前提条件

在开始之前，请确保你已经搭建好了UniApp的开发环境，并且熟悉Vue.js和UniApp的基本使用。

步骤概览

安装所需的插件或库
创建导出Excel的功能函数
在UniApp中调用该功能并处理导出的文件

1. 安装所需的插件或库

由于UniApp本身并没有直接支持导出Excel的功能，我们需要使用第三方库来实现。经过调研，xlsx是一个非常受欢迎的JavaScript库，用于读取和写入Excel文件。然而，由于UniApp的运行环境限制，直接使用xlsx可能会有兼容性问题。

幸运的是，社区中有一些针对UniApp的封装库，比如uni-app-excel或类似的库。但在撰写本文时，这些库的维护情况可能会有所不同，因此建议根据当前的时间和需求选择最合适的库。

假设我们选择了一个名为uni-excel的库（注意：这只是一个假设的名字，实际使用时请查找最新的、维护良好的库），我们可以通过npm或yarn来安装它：

npm install uni-excel
# 或
yarn add uni-excel

2. 创建导出Excel的功能函数

安装完所需的库之后，我们可以开始编写导出Excel的功能函数。以下是一个基本的示例：

// 导入所需的库
import UniExcel from 'uni-excel';

export function exportExcel(data, fileName = 'export.xlsx') {
  // 创建工作簿
  const workbook = UniExcel.createWorkbook();
  
  // 创建工作表
  const worksheet = workbook.createWorksheet({ name: 'Sheet1' });

  // 填充数据
  data.forEach((item, index) => {
    const row = index + 1;
    for (const key in item) {
      if (item.hasOwnProperty(key)) {
        const col = key[0].charCodeAt(0) - 65 + 1; // 假设列名是大写字母
        worksheet.setCellValue(row, col, item[key]);
      }
    }
  });

  // 导出Excel
  UniExcel.writeFile(workbook, fileName).then(() => {
    uni.showToast({
      title: '导出成功',
      icon: 'success'
    });
  }).catch(error => {
    console.error('导出失败:', error);
    uni.showToast({
      title: '导出失败',
      icon: 'none'
    });
  });
}

注意：上述代码是一个简化的示例，实际使用时可能需要根据所选的库进行调整。特别是设置列的部分，实际应用中可能会有更复杂的列名映射和数据转换需求。

3. 在UniApp中调用该功能并处理导出的文件

最后，我们可以在UniApp的页面或组件中调用这个导出函数。例如，在一个按钮的点击事件中：

<template>
  <view>
    <button @click="exportData">导出数据</button>
  </view>
</template>

<script>
import { exportExcel } from '@/utils/excel'; // 假设我们将导出函数放在了这个位置

export default {
  methods: {
    exportData() {
      const data = [
        { A: '姓名', B: '年龄', C: '性别' },
        { A: '张三', B: 25, C: '男' },
        { A: '李四', B: 30, C: '女' }
        // ...更多数据
      ];
      exportExcel(data);
    }
  }
}
</script>

点击“导出数据”按钮后，应用将调用exportExcel函数，并导出包含给定数据的Excel文件。

注意事项和常见问题

文件权限：确保应用有权限访问和写入文件系统，特别是在iOS设备上。
兼容性：由于UniApp和第三方库的更新，本文中的代码和库可能需要根据最新的文档进行调整。
性能：处理大量数据时，导出操作可能会占用较多的资源和时间。
错误处理：在实际应用中，应更加详细地处理可能的错误情况，并提供用户友好的反馈。

其他思路

1. 先把数据组装成wps认识的html格式，就是代码里的template。

2. 把这个template保存到手机上。

app环境中，xlsxjs基本没用，csv我记得以前用过一次，好像是可以。

在写入文件时候，文件对象写入方法writer.write(template)中只能传入string。
我并不知道xlsx的编码格式是什么。用html的table代替，wps认识这样的格式。

单sheet可以用下面的办法：

const res = [
	{name:"jack",age:123,gender:"man"},
	{name:"marry",age:666,gender:"man"},
	{name:"sun",age:88888888,gender:"man"}
]
let str = res.map(m=>{

	let str2 = Object.values(m).map(mp=>{
		return `<td>${mp}</td>`
	}).join('')
	return `<tr>${str2}</tr>`
}).join('')
let str1 = Object.keys(res[0]).map(mp=>{
	return `<td>${mp}</td>`
}).join('')
str = `<tr>${str1}</tr>${str}`
console.log(str);

let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
       xmlns:x="urn:schemas-microsoft-com:office:excel" 
       xmlns="http://www.w3.org/TR/REC-html40">
       <head><!--[if gte mso 9]><xml encoding="UTF-8"><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
       <x:Name>sheet1</x:Name>
       <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
       </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
       </head><body><table>${str}</table></body></html>`;


plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
	// 可通过fs进行文件操作 
	console.log("Request file system success!");
	console.log(fs.name);
	fs.root.getFile(
		`ceshi.xlsx`, {
			create: true,
			exclusive: false
		},
		fileEntry => {
			console.log(1);
			fileEntry.createWriter(
				writer => {
					writer.onwrite = e => {
						// that.count = 100;
						// that.tap = `成功导出[${length}]条数据，文件路径为：${e.target.fileName}`;
						console.log(e.target.fileName);
						setTimeout(function() {
							// that.proshow = false;
							uni.openDocument({
								filePath: `file://${e.target.fileName}`, //这里必须加file://否则会报错打不开文件
								success: function(res) {
									console.log(res);

								},
								fail(res) {
									console.log(res);
								}
							});
						}, 2000);
					};`在这里插入代码片`
					writer.write(template);
				},
				function(e) {
					uni.showToast({
						title: '导出文件失败，请检查你的权限',
						icon: 'none'
					});
				}
			);
		},
		e => {
			console.log(e);
		}

	);
	
}, function(e) {
	alert("Request file system failed: " + e.message);
});