uniapp导入导出Excel_uniapp 导出导入

作者：从前慢现在也慢 | 2024-05-23 18:04:38

踩

uniapp 导出导入

众所周知，uniapp作为跨端利器，有诸多限制，其中之一便是vue页面不支持传统网页的dom、bom、blob等对象。

所以，百度上那些所谓的导入导出excel的方法，大部分都用不了，比如xlsx那个插件，虽然很多方法在vue里不支持，但解析数据等不包含dom那些对象的方法可以考虑下。
插件git:https://github.com/SheetJS/js-xlsx

这类功能也可以交给后台处理，前端直接上传文件给后台解析入库，后台直接生成excel文件返回链接给前端下载。

话不多说，经过一段时间的摸索，uniapp中，app端导入导出，实现方案如下：

<template>
  <view class="content">
    <view class="top_box">{{ title }}</view>

    <view class="btn_cube" @click="tableToExcel">导出一个表来看</view>

    <view class="tip">tips：合并什么的可以直接用table标签相关的行内属性合并，如colspan、rowspan</view>
    <view class="tip">tips：创建目录时，一个大目录，下面再有一级年月的目录，方便到时候读取目录</view>
    <view class="tip">{{ successTip }}</view>

  </view>
</template>

<script>
import { formatDateThis, getUnixTime } from '@/common/util/dateUtil.js'
var that
export default {
  data() {
    return {
      title: 'app端导出excel',
      successTip: ''
    }
  },
  onLoad() {
    that = this
  },
  methods: {
    tableToExcel() {
      // 要导出的json数据
      const jsonData = [{
        name: '测试数据',
        phone: '123456',
        email: '123@456.com'
      }
      ]
      // 列标题
      let worksheet = 'sheet1'
      let str = '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>'
      // 循环遍历，每行加入tr标签，每个单元格加td标签
      for (let i = 0; i < jsonData.length; i++) {
        str += '<tr>'
        for (let item in jsonData[i]) {
          // 增加\t为了不让表格显示科学计数法或者其他格式
          str += `<td>${jsonData[i][item] + '\t'}</td>`
        }
        str += '</tr>'
      }
      // 下载的表格模板数据
      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>${worksheet}</x:Name>
        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
        </head><body><table>${str}</table></body></html>`
      // 下载模板
      exportFile(template)
    }

  }
}

// 导出文件到手机 fileData:要写入到文件的数据，返回参数为文档路径
function exportFile(fileData, documentName = '项目Excel文件') {
  /*
        PRIVATE_DOC: 应用私有文档目录常量
        PUBLIC_DOCUMENTS: 程序公用文档目录常量
        */
  plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
    let rootObj = fs.root
    let fullPath = rootObj.fullPath
    // let reader = rootObj.createReader();
    // console.log(reader);
    // reader.readEntries((res)=>{
    //     console.log(res); //这里拿到了该目录下所有直接文件和目录
    // },(err)=>{console.log(err);})

    console.log('开始导出数据********')
    // 创建文件夹
    rootObj.getDirectory(documentName, {
      create: true
    }, function(dirEntry) {
      // 获取当前的年月继续创建文件夹
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      dirEntry.getDirectory(`${year}年${month}月`, {
        create: true
      }, function(dirEntry2) {
        // 创建文件,防止重名
        let fileName = 'excel' + getUnixTime(formatDateThis(new Date()))
        console.log(fileName)
        dirEntry2.getFile(`${fileName}.xlsx`, {
          create: true
        }, function(fileEntry) {
          fileEntry.createWriter(function(writer) {
            writer.onwritestart = (e) => {
              uni.showLoading({
                title: '正在导出',
                mask: true
              })
            }

            //  /storage/emulated/0指的就是系统路径
            let pathStr = fullPath.replace('/storage/emulated/0', '')
            writer.onwrite = (e) => {
              // 成功导出数据;
              uni.hideLoading()
              setTimeout(() => {
                uni.showToast({
                  title: '成功导出',
                  icon: 'success'
                })
                that.successTip = `文件位置：${pathStr}/${documentName}/${year}年${month}月`
              }, 500)
            }
            // 写入内容;
            writer.write(fileData)
          }, function(e) {
            console.log(e.message)
          })
        })
      })
    })
  })
}

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

至于导入Excel，我这里就不贴代码了，思路就是利用uniapp的web-view标签，相当于是传统网页的做法，利用input标签的file属性，最后把解析到的值，传递回vue页面。

web-view相关阅读: https://uniapp.dcloud.io/component/web-view

uni.postMessage({
        data: {
            excelData: finalData
        }
    });
1
2
3
4
5

在这里插入图片描述

tips:手机上不比电脑，如果要调试如上功能，建议下个办公软件，比如wps手机版，这样找excel文件就比较快。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/613871