• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序——使用excel-export导出excel

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

背景

  • 在学习微信小程序的过程中,需要导出excel文件数据,可是却没有后台服务器,所以只能够想着使用纯前端去导出excel
  • 使用插件:excel-export

导出思想

  • 将数据封装成excel文件
  • 将excel文件上传到云存储中
  • 将云存储的excel文件以图片的格式下载到本地
  • 修改图片文件后缀为xlsx,成为excel文件

操作

  • 将数据封装成excel文件;将excel文件上传到云存储中
    • 建立云函数(我的云函数名称:uploadexportfile),打开云函数终端,安装excel-export插件
    • 开发代码
      // 云函数入口文件
      const cloud = require(\'wx-server-sdk\')
      const nodeExcel = require(\'excel-export\');
      const path = require(\'path\'); 
      cloud.init()
      
      // 云函数入口函数
      exports.main = async (event, context) => {
      
        var tableMap = {
          styleXmlFile:path.join(__dirname,"styles.xml"),
          name: Date.now()+"-export",
          cols: [],
          rows: [],
        }
        var tableHead = ["编号", "名称", "生日", "年龄"];
        //添加表头
        for(var i=0;i<tableHead.length;i++){
          tableMap.cols[tableMap.cols.length]={
            caption:tableHead[i],
            type:\'string\'
          }
        }
        //表体:伪数据
        const tableList = [
          {编号:0,名称:\'张三\',生日:\'2019-5-1\',年龄:20},
          {编号:1,名称:\'李四\',生日:\'2019-5-1\',年龄:45}
        ]
        //添加每一行数据
        for(var i=0;i<tableList.length;i++){
          tableMap.rows[tableMap.rows.length]=[
            tableList[i].编号,
            tableList[i].名称,
            tableList[i].生日,
            tableList[i].年龄
          ]
        }
      
      
        //保存excelResult到相应位置
        var excelResult = nodeExcel.execute(tableMap);
        var filePath = "outputExcels";
        var fileName = cloud.getWXContext().OPENID + "-" + Date.now()/1000 + \'.xlsx\';
        //图片上传到云存储
        return await cloud.uploadFile({
          cloudPath: path.join(filePath, fileName),
          fileContent: new Buffer(excelResult,\'binary\')
        }).then(res=>{
          console.log(res.fileID);
          return res;
        }).catch(err=>{
      
        });
      }
    • Next
  • 将云存储的excel文件以图片的格式下载到本地;修改图片文件后缀为xlsx,成为excel文件
    • 代码如下
      //导出excel
      function exportFile(dataHeader,dataList){
      
        wx.showLoading({
          title: \'正在导出\',
        });
        console.log(dataHeader);
        console.log(dataList);
        wx.cloud.callFunction({
          name:\'uploadexportfile\',
          data:{
            dataHeader:dataHeader,
            dataList:dataList
          }
        }).then(res=>{
          const fileID = res.result.fileID;
          //下载文件
          wx.cloud.downloadFile({
            fileID: fileID
          }).then(res1 => {
            
            this.saveFileToPhotosAlbum(res1);//保存文件到相册
            this.delCloudFile(fileID);//删除云存储文件
            
          }).catch(error => {
            // handle error
          })
        }).catch(err1=>{
      
        });
      }
      
      //保存文件到本地相册
      function saveFileToPhotosAlbum(res){
        //授权
        this.writePhotosAlbumAuth();
        // 保存文件
        var saveTempPath = wx.env.USER_DATA_PATH + "/exportFile"+new Date().getTime()+".jpg";
        
        wx.saveFile({
          tempFilePath: res.tempFilePath,
          filePath: saveTempPath ,
          success:res1=> {
            //获取了相册的访问权限,使用 wx.saveImageToPhotosAlbum 将图片保存到相册中
            wx.saveImageToPhotosAlbum({
              filePath: saveTempPath ,
              success: res2 => {
                //保存成功弹出提示,告知一下用户
                wx.hideLoading();
                wx.showModal({
                  title: \'文件已保存到手机相册\',
                  content: \'文件位于tencent/MicroMsg/WeiXin下 \r\n将保存的文件重命名改为[ .xlsx ]后缀即可正常打开\',
                  confirmColor: \'#0bc183\',
                  confirmText: \'知道了\',
                  showCancel: false
                });
              },
              fail(err2) {
                console.log(err2)
              }
            })
          }
        });
      }
      
      //删除云存储文件
      function delCloudFile(fileID){
        const fileIDs=[];
        fileIDs.push(fileID);
        //删除云存储中的excel文件
        wx.cloud.deleteFile({
          fileList: fileIDs,
          success: res4 => {
            // handle success
            console.log(res.fileList);
          },
          fail: console.error
        })
      }
      //上传单个文件
      function uploadSingleFile(cloudPath,filePath){
        wx.cloud.uploadFile({
          cloudPath: cloudPath, // 上传至云端的路径
          filePath: filePath, // 小程序临时文件路径
          success: res => {
            // 返回文件 ID
            console.log(res.fileID)
          },
          fail: console.error
        })
      }
      
      //微信图片保存到本地相册授权
      function writePhotosAlbumAuth(){
        wx.getSetting({
          success(res) {
            if (!res.authSetting[\'scope.writePhotosAlbum\']) {
              wx.authorize({
                scope:\'scope.writePhotosAlbum\',
                success() {
                  console.log(\'授权成功\')
                }
              })
            }
          }
        })
      }
      
      
      module.exports={
        uploadSingleFile:uploadSingleFile,
        exportFile:exportFile,
        saveFileToPhotosAlbum:saveFileToPhotosAlbum,
        delCloudFile:delCloudFile,
        writePhotosAlbumAuth:writePhotosAlbumAuth
      }
    • Next
  • Next

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
1.1微信小程序开发工具使用发布时间:2022-07-18
下一篇:
微信小程序上传Excel文本文件功能发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap