纯前端实现上传下载（后端存取json）xlsx_前端打包json输出到下载

后端存取json，通过 xlsx 依赖转换
上传：前端通过上传模板文件将上传组件（upload）返回的文本流解析成json数据，传给后端
下载：获取后端json转换成文件格式

下载依赖

npm install xlsx
1

utils文件夹下新建 excel.js

import { read, utils, writeFile } from 'xlsx'

// 上传 将上传的文本流解析成json
export const readJsonFromFile = (file, callBackFn) => {
  const reader = new FileReader()
  reader.readAsArrayBuffer(file)
  reader.onload = function (e) {
    const workbook = read(e.target.result)
    console.info('excel读取结果：', workbook)
    const firstSheetName = workbook.SheetNames[0]
    const worksheet = workbook.Sheets[firstSheetName]
    // 读取header
    // const data = utils.sheet_to_json(worksheet, {header:1});
    const data = utils.sheet_to_json(worksheet)
    if (callBackFn) callBackFn(data)
  }
}
// 下载，将json转换成文本流输出
export const createFile = (data, header, fileName) => {
  console.info(data)
  let ws
  if (data && header) {
    ws = utils.json_to_sheet(data, { header: header })
  } else if (data) {
    ws = utils.json_to_sheet(data)
  }
  if (ws) {
    const wb = utils.book_new()
    utils.book_append_sheet(wb, ws, 'sheet1')
    writeFile(wb, fileName + '.xlsx')
  }
}
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

使用

import { readJsonFromFile, createFile } from '@/utils/excel'

// 上传解析
readJsonFromFile(file, (data) => {
	console.info('excel文件导入回调：', data)
}

// 下载 点击触发downloadModal方法
downloadModal(e) {
	/* 内容循环赋值demo */
	
	// 设置文件名
	const modalFileName="货物导入模板"
	// 设置table title
	const modalTitleList="['货物编号', '订货数量']"
	// 设置内容
	const orderList = []
	// rows.forEach((item) => {
	//   const orderInfo = {}
	//   orderInfo[headers[0]] = item.placeOrderNo
	//   orderInfo[headers[1]] = item.placeTypeStr
	//   orderInfo[headers[2]] = item.shopName
	//   orderList.push(orderInfo)
	// })
	
	/* 
	  orderList 内容循环赋值
	  modalTitleList 表头title列表
	  modalFileName 导出的文件名(不加后缀)
	*/
	createFile(orderList, modalTitleList || [], modalFileName)
},
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