如何使用JavaScript實現純前端讀取和導出excel文件

時間  2020-05-10
標籤 如何 使用 javascript 實現 前端 讀取 導出 excel 文件 欄目 JavaScript 简体版
原文   原文鏈接

js-xlsx 介紹

由SheetJS出品的js-xlsx是一款很是方便的只須要純JS便可讀取和導出excel的工具庫，功能強大，支持格式衆多，支持xls、xlsx、ods(一種OpenOffice專有表格文件格式)等十幾種格式。本文所有都是以xlsx格式爲例。javascript

兼容性

兼容性以下圖：html

如何使用

dist目錄下有不少個JS文件，通常狀況下用xlsx.core.min.js就夠了，xlsx.full.min.js則是包含了全部功能模塊。前端

直接script標籤引入便可：java

<script type="text/javascript" src="./js/xlsx.core.min.js"></script>

讀取excel

讀取excel主要是經過XLSX.read(data, {type: type});方法來實現，返回一個叫WorkBook的對象，type主要取值以下：node

  • base64: 以base64方式讀取；
  • binary: BinaryString格式(byte n is data.charCodeAt(n))
  • string: UTF8編碼的字符串；
  • buffer: nodejs Buffer；
  • array: Uint8Array，8位無符號數組；
  • file: 文件的路徑（僅nodejs下支持）；

獲取workbook對象

讀取本地文件

直接上代碼：git

// 讀取本地excel文件
function readWorkbookFromLocalFile(file, callback) {
	var reader = new FileReader();
	reader.onload = function(e) {
		var data = e.target.result;
		var workbook = XLSX.read(data, {type: 'binary'});
		if(callback) callback(workbook);
	};
	reader.readAsBinaryString(file);
}

讀取網絡文件

// 從網絡上讀取某個excel文件，url必須同域，不然報錯
function readWorkbookFromRemoteFile(url, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open('get', url, true);
	xhr.responseType = 'arraybuffer';
	xhr.onload = function(e) {
		if(xhr.status == 200) {
			var data = new Uint8Array(xhr.response)
			var workbook = XLSX.read(data, {type: 'array'});
			if(callback) callback(workbook);
		}
	};
	xhr.send();
}

詳解 workbook

Workbook Object

workbook裏面有什麼東西呢，咱們打印出來看一下：github

能夠看到，SheetNames裏面保存了全部的sheet名字，而後Sheets則保存了每一個sheet的具體內容（咱們稱之爲Sheet Object）。每個sheet是經過相似A1這樣的鍵值保存每一個單元格的內容，咱們稱之爲單元格對象（Cell Object）：json

Sheet Object

每個Sheet Object表示一張表格，只要不是!開頭的都表示普通cell，不然，表示一些特殊含義，具體以下：數組

  • sheet['!ref']：表示全部單元格的範圍，例如從A1到F8則記錄爲A1:F8；
  • sheet[!merges]：存放一些單元格合併信息，是一個數組，每一個數組由包含s和e構成的對象組成，s表示開始，e表示結束，r表示行，c表示列；
  • 等等；

關於單元格合併，看懂下面這張圖基本上就沒問題了：網絡

結果以下：

單元格對象

每個單元格是一個對象（Cell Object），主要有t、v、r、h、w等字段（詳見這裏）：

  • t：表示內容類型，s表示string類型，n表示number類型，b表示boolean類型，d表示date類型，等等
  • v：表示原始值；
  • f：表示公式，如B2+B3；
  • h：HTML內容
  • w：格式化後的內容
  • r：富文本內容rich text
  • 等等

讀取workbook

普通方法：

// 讀取 excel文件
function outputWorkbook(workbook) {
	var sheetNames = workbook.SheetNames; // 工做表名稱集合
	sheetNames.forEach(name => {
		var worksheet = workbook.Sheets[name]; // 只能經過工做表名稱來獲取指定工做表
		for(var key in worksheet) {
			// v是讀取單元格的原始值
			console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);
		}
	});
}

根據!ref肯定excel的範圍，再根據!merges肯定單元格合併（若是有），最後輸出整個table，比較麻煩，幸運的是，插件自身已經寫好工具類XLSX.utils給咱們直接使用，無需咱們本身遍歷，工具類輸出主要包括以下：

有些不經常使用，經常使用的主要是：

  • XLSX.utils.sheet_to_csv：生成CSV格式
  • XLSX.utils.sheet_to_txt：生成純文本格式
  • XLSX.utils.sheet_to_html：生成HTML格式
  • XLSX.utils.sheet_to_json：輸出JSON格式

經常使用的主要是sheet_to_csv或者sheet_to_html，轉csv的話會忽略格式、單元格合併等信息，因此複雜表格可能不適用。轉html的話會保留單元格合併，可是生成的是<html></html>代碼，而不是<table></table>，須要對錶格進行一些定製時不太方便，因此具體仍是要視狀況來採用合適的工具類。

這裏寫一個採用轉csv方式輸出結果的簡單示例，可點擊這裏查看在線DEMO：

function readWorkbook(workbook)
{
	var sheetNames = workbook.SheetNames; // 工做表名稱集合
	var worksheet = workbook.Sheets[sheetNames[0]]; // 這裏咱們只讀取第一張sheet
	var csv = XLSX.utils.sheet_to_csv(worksheet);
	document.getElementById('result').innerHTML = csv2table(csv);
}

// 將csv轉換成簡單的表格，會忽略單元格合併，在第一行和第一列追加相似excel的索引
function csv2table(csv)
{
	var html = '<table>';
	var rows = csv.split('\n');
	rows.pop(); // 最後一行沒用的
	rows.forEach(function(row, idx) {
		var columns = row.split(',');
		columns.unshift(idx+1); // 添加行索引
		if(idx == 0) { // 添加列索引
			html += '<tr>';
			for(var i=0; i<columns.length; i++) {
				html += '<th>' + (i==0?'':String.fromCharCode(65+i-1)) + '</th>';
			}
			html += '</tr>';
		}
		html += '<tr>';
		columns.forEach(function(column) {
			html += '<td>'+column+'</td>';
		});
		html += '</tr>';
	});
	html += '</table>';
	return html;
}

導出excel

導出分爲2種，一種是基於現有excel修改，一種是全新生成，前者比較簡單，咱們這裏着重講後者。

本身手寫代碼生成

導出excel文件，主要是如何生成一個sheet，咱們這裏寫一個最簡單的csv轉excel示例：

// csv轉sheet對象
function csv2sheet(csv) {
	var sheet = {}; // 將要生成的sheet
	csv = csv.split('\n');
	csv.forEach(function(row, i) {
		row = row.split(',');
		if(i == 0) sheet['!ref'] = 'A1:'+String.fromCharCode(65+row.length-1)+(csv.length-1);
		row.forEach(function(col, j) {
			sheet[String.fromCharCode(65+j)+(i+1)] = {v: col};
		});
	});
	return sheet;
}

// 將一個sheet轉成最終的excel文件的blob對象，而後利用URL.createObjectURL下載
function sheet2blob(sheet, sheetName) {
	sheetName = sheetName || 'sheet1';
	var workbook = {
		SheetNames: [sheetName],
		Sheets: {}
	};
	workbook.Sheets[sheetName] = sheet;
	// 生成excel的配置項
	var wopts = {
		bookType: 'xlsx', // 要生成的文件類型
		bookSST: false, // 是否生成Shared String Table，官方解釋是，若是開啓生成速度會降低，但在低版本IOS設備上有更好的兼容性
		type: 'binary'
	};
	var wbout = XLSX.write(workbook, wopts);
	var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});
	// 字符串轉ArrayBuffer
	function s2ab(s) {
		var buf = new ArrayBuffer(s.length);
		var view = new Uint8Array(buf);
		for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
		return buf;
	}
	return blob;
}

拿到上面的blob對象就能夠直接下載了，參考我以前在JS彈出下載對話框裏面封裝好的openDownloadDialog方法：

/**
 * 通用的打開下載對話框方法，沒有測試過具體兼容性
 * @param url 下載地址，也能夠是一個blob對象，必選
 * @param saveName 保存文件名，可選
 */
function openDownloadDialog(url, saveName)
{
	if(typeof url == 'object' && url instanceof Blob)
	{
		url = URL.createObjectURL(url); // 建立blob地址
	}
	var aLink = document.createElement('a');
	aLink.href = url;
	aLink.download = saveName || ''; // HTML5新增的屬性，指定保存文件名，能夠不要後綴，注意，file:///模式下不會生效
	var event;
	if(window.MouseEvent) event = new MouseEvent('click');
	else
	{
		event = document.createEvent('MouseEvents');
		event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	}
	aLink.dispatchEvent(event);
}

因此，最終下載實現以下：

// 傳入csv，執行後就會彈出下載框
function exportExcel(csv) {
	var sheet = csv2sheet(csv);
	var blob = sheet2blob(sheet);
	openDownloadDialog(blob, '導出.xlsx')；
}

利用官方工具類生成

其實上面這些代碼都不須要咱們手寫，官方已經提供好了現成的工具類給咱們使用，主要包括：

  • aoa_to_sheet: 這個工具類最強大也最實用了，將一個二維數組轉成sheet，會自動處理number、string、boolean、date等類型數據；
  • table_to_sheet: 將一個table dom直接轉成sheet，會自動識別colspan和rowspan並將其轉成對應的單元格合併；
  • json_to_sheet: 將一個由對象組成的數組轉成sheet；

aoa_to_sheet示例：

var aoa = [
	['姓名', '性別', '年齡', '註冊時間'],
	['張三', '男', 18, new Date()],
	['李四', '女', 22, new Date()]
];
var sheet = XLSX.utils.aoa_to_sheet(aoa);
openDownloadDialog(sheet2blob(sheet), '導出.xlsx');

table_to_sheet就更簡單了，直接XLSX.utils.table_to_sheet($('table')[0])便可；

處理單元格合併

通常來講，前端生成excel而不是csv最主要目的都是爲了解決csv不能實現單元格合併的問題，要否則直接導出csv文件就行了，何須引入幾百kb的插件。

假設咱們要生成以下格式的excel文件，其中A1-C1進行單元格合併：

代碼以下：

var aoa = [
	['主要信息', null, null, '其它信息'], // 特別注意合併的地方後面預留2個null
	['姓名', '性別', '年齡', '註冊時間'],
	['張三', '男', 18, new Date()],
	['李四', '女', 22, new Date()]
];
var sheet = XLSX.utils.aoa_to_sheet(aoa);
sheet['!merges'] = [
	// 設置A1-C1的單元格合併
    {s: {r: 0, c: 0}, e: {r: 0, c: 2}}
];
openDownloadDialog(sheet2blob(sheet), '單元格合併示例.xlsx');

須要注意的地方就是被合併的單元格要用null預留出位置，不然後面的內容（本例中是第四列其它信息）會被覆蓋。

自定義樣式

普通版本不支持定義字體、顏色、背景色等，有這個功能須要的可使用pro版，好像是要收費的，由於官網沒看到下載地址。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程