uniapp导入导出Excel

Debug_info

于 2024-04-29 14:14:46 发布

阅读量276

点赞数 2

文章标签： uni-app excel

本文链接：https://blog.csdn.net/bxqmz/article/details/138311473

版权

众所周知，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>

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

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

uni.postMessage({
        data: {
            excelData: finalData
        }
    });

在这里插入图片描述

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

Debug_info

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
uniapp导入导出Excel

至于导入Excel，我这里就不贴代码了，思路就是利用uniapp的web-view标签，相当于是传统网页的做法，利用input标签的file属性，最后把解析到的值，传递回vue页面。所以，百度上那些所谓的导入导出excel的方法，大部分都用不了，比如xlsx那个插件，虽然很多方法在vue里不支持，但解析数据等不包含dom那些对象的方法可以考虑下。tips:手机上不比电脑，如果要调试如上功能，建议下个办公软件，比如wps手机版，这样找excel文件就比较快。
复制链接

扫一扫