网上有许多文章是讲述小程序将数据导出为excel表格的,但大多需要经过请求服务端,再加上云存储。那一套逻辑之前做后端的时候就玩过了。很多时候,我们浏览页面时数据已经从服务端获取到本地了,直接将之导出即可,再走服务端,实为多此一举。为了减轻服务端压力,于是便有了这篇文章。本文章介绍如何在小程序使用纯前端技术将以获取到的数据导出为excel表格。文末有代码片段
const XLSX = require('../utils/excel.js')
Page({
data: {
},
onLoad() {
},
exportData() {
// 数据源
const data = [{
code: 1,
name: 'A',
}, {
code: 2,
name: 'B',
}, {
code: 3,
name: 'C',
}, {
code: 4,
name: 'D',
}]
// 构建一个表的数据
let sheet = []
let title = ['序号', '姓名']
sheet.push(title)
data.forEach(item => {
let rowcontent = []
rowcontent.push(item.code)
rowcontent.push(item.name)
sheet.push(rowcontent)
})
// XLSX插件使用
var ws = XLSX.utils.aoa_to_sheet(sheet);
var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "用户表");
var fileData = XLSX.write(wb, {
bookType: "xlsx",
type: 'base64'
});
let filePath = `${wx.env.USER_DATA_PATH}/用户表.xlsx`
// 写文件
const fs = wx.getFileSystemManager()
fs.writeFile({
filePath: filePath,
data: fileData,
encoding: 'base64',
bookSST: true,
success(res) {
console.log(res)
const sysInfo = wx.getSystemInfoSync()
// 导出
if (sysInfo.platform.toLowerCase().indexOf('windows') >= 0) {
// 电脑PC端导出
wx.saveFileToDisk({
filePath: filePath,
success(res) {
console.log(res)
},
fail(res) {
console.error(res)
util.tips("导出失败")
}
})
} else {
// 手机端导出
// 打开文档
wx.openDocument({
filePath: filePath,
showMenu: true,
success: function (res) {
console.log('打开文档成功')
},
fail: console.error
})
}
},
fail(res) {
console.error(res)
if (res.errMsg.indexOf('locked')) {
wx.showModal({
title: '提示',
content: '文档已打开,请先关闭',
})
}
}
})
}
})
导出效果如下,如需高级设置请参照xlsx插件文档 sheetjs插件文档
代码片段
-完-
ws['A1‘].s = {
alignment: {
horizontal: 'center',
vertical: 'center',
wrapText: true,
},
设置无效该咋办 有知道的嘛
同问这个问题,现在最新的情况 能查看表格了,但是不能下载 不能编辑。
手机端可以打开,电脑端打不开,大佬能说一下怎么解决吗?
请问大佬,这个excel确实打开了,但是在手机的哪个位置呢?我想发送出去?感谢各位大佬,在线等
非常感谢 解决了困扰我很久的问题,请问可以转载吗?
你好,问下安卓手机打开excel出现空白有遇到吗
作者有没有完整的源码
这个插件能在小程序导入excel 解析数据吗?
有搞成功的吗,有偿求教
谢谢