Vue项目使用XLSX展示、下载和读写Excel文件

大国503

已于 2024-11-22 20:29:15 修改

阅读量2k

点赞数 5

文章标签： vue.js excel 前端

于 2024-11-22 20:23:32 首次发布

本文链接：https://blog.csdn.net/daguo504/article/details/143978049

版权

XLSX介绍

xlsx的功能特性：

支持多种文件格式：.xlsx, .xlsm, .xlsb, .ods, .csv 等。
支持数据的读取和写入。
支持多种单元格样式，如字体、颜色、背景色等。
支持创建图表和图片。
可以将工作簿转换为 JSON 对象，也可以将 JSON 数据导入到工作簿中。
提供了丰富的 API，可以实现复杂的 Excel 操作。

XLSX安装与引用

第一步：安装必要的依赖：

npm install xlsx --save

第二步：Vue项目引入xlsx库文件

// Vue 2 项目
import XLSX from 'xlsx'

//Vue 3 项目
import * as XLSX from 'xlsx'

本地上传excel并展示

1.本地excel文件上传

<template>
	<view>
		<view>1.选择要上传的文件：</view>
		<input id="selectedFile" type="file" name="files[]" accept=".sjs, .xlsx, .xlsm, .ssjson, .json, .csv" />
		<button @click="readExcelFile">读取文件并展示</button>
		<view id="excelTable" class="flex-center excel-table"></view>
	</view>
</template>

2.读取上传的本地文件并展示

function readExcelFile() {
	const excelFileInput = document.getElementById('selectedFile');
	// Check if a file is selected
	if (excelFileInput.files.length === 0) {
		alert('请选择要处理的文件!');
		return;
	}
	// Read the Excel file
	const file = excelFileInput.files[0];
	const reader = new FileReader();
	reader.readAsBinaryString(file);
	var tempArr = []
	reader.onload = function(e) {
		// Parse Excel data
		const data = e.target.result;
		const workbook = XLSX.read(data, {
			type: 'binary'
		});
		const worksheet = workbook.Sheets[workbook.SheetNames[0]];
		const html = XLSX.utils.sheet_to_html(worksheet)
		document.getElementById("excelTable").innerHTML = html
    }
}

3.效果展示：
在这里插入图片描述

网络请求excel文件二进制流并展示

1.网络请求接口

export function getExcelFileData(data) {
  return request({
    url: '/files/export',
    method: 'post',
    data: data,
    responseType: 'blob', //注意：这里一定要加上响应类型“blob”，否则有可能乱码
  })
}

2.前端页面

<template>
	<div>
		<div id="excelTable" class="flex-center excel-table"></div>
	</div>
</template>

3.请求文件二进制流并展示

searchReportData(){
      getExcelFileData(this.params).then(res=>{
          let reader = new FileReader()
          reader.readAsArrayBuffer(res)
          reader.onload = (e) => {
            const data = e.target.result;
            const workbook = XLSX.read(data, {
              type: 'base64'
            });
            const worksheet = workbook.Sheets[workbook.SheetNames[0]];
            var html = XLSX.utils.sheet_to_html(worksheet)
            // html = html.replace(new RegExp("<table", 'g'),"<table style='border-spacing: 0;border-collapse: collapse;' ")  //设置表格样式，单元格之间间隔和合并相同邻边
            // html = html.replace(new RegExp("<td", 'g'),"<td style='border: 1px solid #000;padding:5px;' ") //设置单元格样式，单元格边框
            document.getElementById("previewTable").innerHTML = html
          }
      })
    }

4.效果展示：
在这里插入图片描述

下载excel文件并保存本地

    /**
     * 导出
     */
    handleExport() {
      if (this.daterangeuseTime && this.daterangeuseTime.length) {
        this.queryParams.startOrderTime = this.daterangeuseTime[0]
        this.queryParams.endOrderTime = this.daterangeuseTime[1]
      }
      getExcelFileData(this.queryParams).then(res=>{
        let blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=utf-8'})
        this.downloadFileByBlob(blob,`报表_${new Date().getTime()}.xlsx`)
      })
    },
    /**
     * 下载文件流数据
     * @param blob
     * @param fileName
     */
    downloadFileByBlob(blob,fileName)  {
      let objectUrl = URL.createObjectURL(blob);
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = objectUrl
      link.setAttribute('download', fileName)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },

xlsx读写excel文件

在平时的工作中，常常需要处理一些固定格式的excel文件，操作难度不大，但重复性高，工作量大。这时我们就想到如何通过代码处理这些重复性的工作，解放双手，提供工作效率。

searchReportData(){
      getExcelFileData(this.params).then(res=>{
          let reader = new FileReader()
          reader.readAsArrayBuffer(res)
          reader.onload = (e) => {
            const data = e.target.result;
            const workbook = XLSX.read(data, {
              type: 'base64'
            });
            const worksheet = workbook.Sheets[workbook.SheetNames[0]];
            var html = XLSX.utils.sheet_to_html(worksheet)
            //将excel文件转成一个二维数组数据
            const jsonData = XLSX.utils.sheet_to_json(worksheet, {
				header: 1  //header的使用方法见下面详解
			});
			var tempArr = []
			//将二维数组数据转成实体数组
			for (let i = 1; i < jsonData.length; i++) {
				var model = {}
				model.name= jsonData[i][0] || ""
				model.sex= jsonData[i][1] || ""
				model.age= jsonData[i][2] || ""
				...
				tempArr.push(model)
			}
			//***************
				根据业务逻辑处理实体属性内容
			//***************
			//导出表格数据
			const exportData = resultArray.map(item => {
				return [
					item["name"],
					item["sex"],
					item["age"],
					...
				]
			})
			//导出表格头部内容
			const headers = [
				"姓名",
				"性别",
				"年龄",
				...
			]
			const allDatas = [headers].concat(exportData)//将表头和数据合并起来
			const worksheet = XLSX.utils.aoa_to_sheet(allDatas);//将数据转成工作表
			const workbook = XLSX.utils.book_new() //初始化一个新的表
			XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1') //将内容保存到表中的sheet1
			var filename =  "员工信息.xlsx"
			XLSX.writeFile(workbook, filename) //将表数据写文件到本地并命名文件名，
          }
      })
    }

在使用XLSX.utils.sheet_to_json()函数读取Excel文件并转换为JSON格式时，header参数起着关键作用。以下是header参数的不同用法及其效果：

当header为1时： 
输出为一个二维数组，包含了所有数据，包括空值项，但每行末尾的空值不会显示。

当header不为1时：
输出为一个包含字符串的数组，不包含空值项，直接跳过空值。同时，是一个以第一行为Key值的键值对。

当header为'A'时：
输出是以Excel的列标签（如A、B、C等）为key值的键值对，默认也不显示空值。

当header为一个字符串数组时：
输出是以字符串数组的字符为key值的键值对。同时，有以下特性：
每个字符的序号与Excel原始数据对应，如果字符数组比数据列多，只会取前几个。
不同字符，以阿拉伯数字从小到大优先排列，后面字母从A到Z排列。

因此，如果你需要将Excel文件中的某一列折叠起来，即不显示某些列的数据，可以通过合理设置header参数来实现。例如，如果你想要忽略第一列，可以将header设置为2，这样第一列就不会作为键值对的键出现。如果你想要使用Excel的列标签作为键，可以将header设置为'A'。这样，你就可以根据需要选择性地显示或隐藏某些列的数据。