狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

1.js-xlsx 介紹

由SheetJS出品的js-xlsx是一款非常方便的只需要純JS即可讀取和導(dǎo)出excel的工具庫，功能強(qiáng)大，支持格式眾多，支持xls、xlsx、ods(一種OpenOffice專有表格文件格式)等十幾種格式。本文全部都是以xlsx格式為例。

官方github：https://github.com/SheetJS/js-xlsx

本文配套demo在線演示地址：http://demo.haoji.me/2017/02/08-js-xlsx/

（源碼附件：js-xlsx.rar）

本文同步首發(fā)于我的個(gè)人博客和博客園。

1.1. 兼容性

兼容性如下圖：

1.2. 如何使用

dist目錄下有很多個(gè)JS文件，一般情況下用xlsx.core.min.js就夠了，xlsx.full.min.js則是包含了所有功能模塊。

直接script標(biāo)簽引入即可：

讀取excel

讀取excel主要是通過XLSX.read(data, {type: type});方法來實(shí)現(xiàn)，返回一個(gè)叫WorkBook的對象，type主要取值如下：

base64: 以base64方式讀取；

binary: BinaryString格式(byte n is data.charCodeAt(n))

string: UTF8編碼的字符串；

buffer: nodejs Buffer；

array: Uint8Array，8位無符號數(shù)組；

file: 文件的路徑（僅nodejs下支持）；

2.1. 獲取workbook對象

2.1.1. 讀取本地文件

直接上代碼：

// 讀取本地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);

}

2.1.2. 讀取網(wǎng)絡(luò)文件

// 從網(wǎng)絡(luò)上讀取某個(gè)excel文件，url必須同域，否則報(bào)錯(cuò)

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();

}

2.2. 詳解 workbook

2.2.1. Workbook Object

workbook里面有什么東西呢，我們打印出來看一下：

可以看到，SheetNames里面保存了所有的sheet名字，然后Sheets則保存了每個(gè)sheet的具體內(nèi)容（我們稱之為Sheet Object）。每一個(gè)sheet是通過類似A1這樣的鍵值保存每個(gè)單元格的內(nèi)容，我們稱之為單元格對象（Cell Object）：

2.2.2. Sheet Object

每一個(gè)Sheet Object表示一張表格，只要不是!開頭的都表示普通cell，否則，表示一些特殊含義，具體如下：

sheet[''!ref'']：表示所有單元格的范圍，例如從A1到F8則記錄為A1:F8；

sheet[!merges]：存放一些單元格合并信息，是一個(gè)數(shù)組，每個(gè)數(shù)組由包含s和e構(gòu)成的對象組成，s表示開始，e表示結(jié)束，r表示行，c表示列；

等等。

關(guān)于單元格合并，看懂下面這張圖基本上就沒問題了：

結(jié)果如下：

2.2.3. 單元格對象

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

t：表示內(nèi)容類型，s表示string類型，n表示number類型，b表示boolean類型，d表示date類型，等等

v：表示原始值；

f：表示公式，如B2+B3；

h：HTML內(nèi)容

w：格式化后的內(nèi)容

r：富文本內(nèi)容rich text

等等

2.2.4. 讀取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);

}

});

}

根據(jù)!ref確定excel的范圍，再根據(jù)!merges確定單元格合并（如果有），最后輸出整個(gè)table，比較麻煩，幸運(yùn)的是，插件自身已經(jīng)寫好工具類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，轉(zhuǎn)csv的話會(huì)忽略格式、單元格合并等信息，所以復(fù)雜表格可能不適用。轉(zhuǎn)html的話會(huì)保留單元格合并，但是生成的是代碼，而不是，需要對表格進(jìn)行一些定制時(shí)不太方便，所以具體還是要視情況來采用合適的工具類。

這里寫一個(gè)采用轉(zhuǎn)csv方式輸出結(jié)果的簡單示例，可點(diǎn)擊這里查看在線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轉(zhuǎn)換成簡單的表格，會(huì)忽略單元格合并，在第一行和第一列追加類似excel的索引

function csv2table(csv)

{

var html = '';

var rows = csv.split('\n');

rows.pop(); // 最后一行沒用的

rows.forEach(function(row, idx) {

var columns = row.split(',');

columns.unshift(idx+1); // 添加行索引

if(idx == 0) { // 添加列索引

html += '

';

for(var i=0; i

html += '

';

}

html += '

';

}

html += '

';

columns.forEach(function(column) {

html += '

';

});

html += '

';

});

html += '

' + (i==0?'':String.fromCharCode(65+i-1)) + '
'+column+'

';

return html;

}

3、導(dǎo)出excel

導(dǎo)出分為2種，一種是基于現(xiàn)有excel修改，一種是全新生成，前者比較簡單，我們這里著重講后者。

3.1.自己手寫代碼生成

導(dǎo)出excel文件，主要是如何生成一個(gè)sheet，我們這里寫一個(gè)最簡單的csv轉(zhuǎn)excel示例：

// csv轉(zhuǎn)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;

}

// 將一個(gè)sheet轉(zhuǎn)成最終的excel文件的blob對象，然后利用URL.createObjectURL下載

function sheet2blob(sheet, sheetName) {

sheetName = sheetName ││ 'sheet1';

var workbook = {

SheetNames: [sheetName],

Sheets: {}

};

workbook.Sheets[sheetName] = sheet;

// 生成excel的配置項(xiàng)

var wopts = {

bookType: 'xlsx', // 要生成的文件類型

bookSST: false, // 是否生成Shared String Table，官方解釋是，如果開啟生成速度會(huì)下降，但在低版本IOS設(shè)備上有更好的兼容性

type: 'binary'

};

var wbout = XLSX.write(workbook, wopts);

var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});

// 字符串轉(zhuǎn)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 下載地址，也可以是一個(gè)blob對象，必選

 * @param saveName 保存文件名，可選

 */

function openDownloadDialog(url, saveName)

{

if(typeof url == 'object' && url instanceof Blob)

{

url = URL.createObjectURL(url); // 創(chuàng)建blob地址

}

var aLink = document.createElement('a');

aLink.href = url;

aLink.download = saveName ││ ''; // HTML5新增的屬性，指定保存文件名，可以不要后綴，注意，file:///模式下不會(huì)生效

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);

}

所以，最終下載實(shí)現(xiàn)如下：

// 傳入csv，執(zhí)行后就會(huì)彈出下載框

function exportExcel(csv) {

var sheet = csv2sheet(csv);

var blob = sheet2blob(sheet);

openDownloadDialog(blob, '導(dǎo)出.xlsx')；

}

3.2.利用官方工具類生成

其實(shí)上面這些代碼都不需要我們手寫，官方已經(jīng)提供好了現(xiàn)成的工具類給我們使用，主要包括：

aoa_to_sheet: 這個(gè)工具類最強(qiáng)大也最實(shí)用了，將一個(gè)二維數(shù)組轉(zhuǎn)成sheet，會(huì)自動(dòng)處理number、string、boolean、date等類型數(shù)據(jù)；

table_to_sheet: 將一個(gè)table dom直接轉(zhuǎn)成sheet，會(huì)自動(dòng)識(shí)別colspan和rowspan并將其轉(zhuǎn)成對應(yīng)的單元格合并；

json_to_sheet: 將一個(gè)由對象組成的數(shù)組轉(zhuǎn)成sheet；

aoa_to_sheet示例：

varaoa = [    [''姓名'',''性別'',''年齡'',''注冊時(shí)間''],    [''張三'',''男'',18,newDate()],    [''李四'',''女'',22,newDate()]];varsheet = XLSX.utils.aoa_to_sheet(aoa);openDownloadDialog(sheet2blob(sheet),''導(dǎo)出.xlsx'');

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

3.3. 處理單元格合并

一般來說，前端生成excel而不是csv最主要目的都是為了解決csv不能實(shí)現(xiàn)單元格合并的問題，要不然直接導(dǎo)出csv文件就好了，何必引入幾百kb的插件。

假設(shè)我們要生成如下格式的excel文件，其中A1-C1進(jìn)行單元格合并：

代碼如下：

var aoa = [

['主要信息', null, null, '其它信息'], // 特別注意合并的地方后面預(yù)留2個(gè)null

['姓名', '性別', '年齡', '注冊時(shí)間'],

['張三', '男', 18, new Date()],

['李四', '女', 22, new Date()]

];

var sheet = XLSX.utils.aoa_to_sheet(aoa);

sheet['!merges'] = [

// 設(shè)置A1-C1的單元格合并

    {s: {r: 0, c: 0}, e: {r: 0, c: 2}}

];

openDownloadDialog(sheet2blob(sheet), '單元格合并示例.xlsx');

需要注意的地方就是被合并的單元格要用null預(yù)留出位置，否則后面的內(nèi)容（本例中是第四列其它信息）會(huì)被覆蓋。

3.4. 自定義樣式

普通版本不支持定義字體、顏色、背景色等，有這個(gè)功能需要的可以使用pro版，好像是要收費(fèi)的，因?yàn)楣倬W(wǎng)沒看到下載地址。