天天看點
傳回

nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理

最近在做項目的時候需要這樣一個子產品，讓使用者上傳excel檔案導入姓名和電話号碼，可以線上預覽。

之後就開始琢磨要怎麼實作。

首先這樣的流程：前端----背景----存儲----讀取----傳回前端json格式。

然後我把這個流程簡化成幾個難點：

1.前端怎麼操作檔案？

2.前端怎麼發至背景？

3.背景如何接收檔案？

4.背景怎麼讀取excel檔案？

正文：

1.前端怎麼操作檔案？

h5有自己的檔案作業系統，File API，網上有很多資源，以下是一段最簡潔的代碼：

[html]  view plain  copy  

nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理
nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理
  1. <form id="uploadForm" enctype="multipart/form-data">  
  2.     <p>上傳檔案：<input type="file" name="file" id="ff" /></p>  
  3.     <input type="button" value="上傳" onclick="doUpload()" />  
  4. </form>  

最為關鍵是的把form的entype設定為multipart/form-data，該類型就是為傳檔案而服務的。

2.前端怎麼發至背景存儲？

前端發送檔案最簡單的就是jquery封裝的ajax方法，以下為doUpload()函數的具體代碼：

[javascript]  view plain  copy  

nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理
nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理
  1. function doUpload() {  
  2.     var formData = new FormData($("#uploadForm")[0]);  
  3.     if($('#ff').val() !== ''){  
  4.         $.ajax({  
  5.             url: '',//此處放你自己的背景API  
  6.             type: 'POST',  
  7.             data: formData,  
  8.             async: false,  
  9.             cache: false,  
  10.             contentType: false,  
  11.             processData: false,  
  12.             success: function(returndata) {  
  13.                 alert(returndata);  
  14.             },  
  15.             error: function(returndata) {  
  16.                 alert(returndata);  
  17.             }  
  18.         });  
  19.     }else{  
  20.         alert('請選擇檔案。')  
  21.     }  
  22. }  

右鍵打開‘檢查’然後點開Network這一欄，然後選取檔案點選上傳之後會多出一欄formdata 點開它，在Headers裡你會看到以下這些内容

說明已經傳送到了背景API。

3.背景如何接收檔案？

查閱很多資料之後找到一個叫做connect-busboy的子產品可以進行檔案傳輸。

安裝子產品

[javascript]  view plain  copy  

nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理
nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理
  1. npm install connect-busboy  

使用子產品

nodejs啟動頁

[javascript]  view plain  copy  

nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理
nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理
  1. var busboy = require('connect-busboy');  

中間件配置

[javascript]  view plain  copy  

nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理
nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理
  1. app.use(busboy({  
  2.     limits: {  
  3.         fileSize: 10 * 1024 * 1024 // 10MB  
  4.     }  
  5. }));  

需要引入的子產品

[javascript]  view plain  copy  

nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理
nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理
  1. var Busboy = require('connect-busboy');  
  2. var path = require('path');  
  3. var fs = require('fs');  

然後就可以使用了

[javascript]  view plain  copy  

nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理
nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理
  1. router.post('/formdata', function(req, res, next) {  
  2.     res.setHeader("Access-Control-Allow-Origin", "*");//允許跨域請求  
  3.     req.busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {  
  4.         var tmp_path = path.join(__dirname, path.basename(filename));//存儲路徑  
  5.         var ws = fs.createWriteStream(tmp_path);  
  6.         file.pipe(ws);  
  7.         console.log(tmp_path);  
  8.         file.on('end', function() {  
  9.             console.log('file end');  
  10.         });  
  11.         ws.on('finish',function(){  
  12.             console.log('寫入完成');  
  13.             //test(req,res,next,tmp_path);這段是之後用來處理excel檔案的函數  
  14.         });  
  15.     });  
  16.     req.pipe(req.busboy);  
  17. });  

這樣你就可以将前端傳輸的檔案存儲在了背景。

4.背景怎麼讀取excel檔案？

這個時候又需要一個叫做xlsx的子產品。

安裝

npm install xlsx

使用

var xlsx = require('xlsx');

以下是讀取檔案并傳回json的函數

[javascript]  view plain  copy  

nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理
nodejs線上xlsx轉json,使用gulp實作檔案更改自動重新整理
  1. function test(req, res, next, mypath) {  
  2.     var workbook = xlsx.readFileSync(mypath);//讀取剛存完的excel檔案  
  3.     var firstSheetName = workbook.SheetNames[0];  
  4.     var sheet = workbook.Sheets[firstSheetName];  
  5.     var cell = '1';  
  6.     var r = 0,  
  7.         c = 0,  
  8.         exceltext = new Array,  
  9.         count = new Object;  
  10.     try {  
  11.         while (cell !== undefined) {  
  12.             var row = xlsx.utils.encode_row(r);//行  
  13.             var col = xlsx.utils.encode_col(c);//第一列  
  14.             var col1 = xlsx.utils.encode_col(c + 1);//第二列  
  15.             var addr = col + row;  
  16.             var addr1 = col1 + row;  
  17.             var cell = sheet[addr];//讀取此行第一列的資料，姓名  
  18.             var cell1 = sheet[addr1];//讀取此行第二列的資料，電話号碼  
  19.             r++;//一次讀取下一行  
  20.            //exceltext[n - 1] = {name:cell.w,phone:cell1.w};将資料存到數組裡  
  21. exceltext.push({name:cell.w,phone:cell1.w});    
  22.         }  
  23.     } catch (err) {  
  24.         res.send(exceltext);//傳回json資料  
  25.     }  
  26. }  

這樣整套流程就做完了。

使用gulp實作檔案更改自動重新整理

我相信肯定有很多前端開發者和我一樣都厭倦了修改完代碼再切換到浏覽器重新整理去看新的實作。今天我們就用一種最簡單的檔案監聽模式和一個gulp插件（gulp-livereload）來實作這個功能。
  1. 首先安裝gulp 
npm install gulp -g
  • 1
  1. 安裝gulp-livereload插件 
npm i gulp-livereload --save-dev
  • 1

(npm i 為npm install 縮寫） 

3. 配置gulp配置檔案 

自動重新整理配置

//監聽所有打包之後的檔案變動，自動重新整理頁面
gulp.task('watch', function () {
  // Create LiveReload server
  livereload.listen();
  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

要使這個能夠工作，還需要在浏覽器上安裝LiveReload插件，或者在你需要自動重新整理的頁面上加上 

1.本地

<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
  • 1

2.遠端

<script src="http://192.168.0.1:35729/livereload.js?snipver=1"></script>
  • 1

整個gulp

var gulp = require('gulp');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');
var babel = require('gulp-babel');
var livereload = require('gulp-livereload');
//編譯less
gulp.task('less', function () {
  return gulp.src('./src/less/**.less')
    .pipe(less())
    //.pipe(minifyCSS())
    .pipe(gulp.dest('dist/css'));
});
//監聽less檔案
gulp.task('autoless', function () {
  gulp.watch('./src/less/**.less', ['less'])
})
//編譯es6
gulp.task('babel', () => {
  return gulp.src(['./src/js/**.js'])
    .pipe(babel({ presets: ['es2015'] }))
    .pipe(gulp.dest('dist/js'));
});
//監聽js檔案
gulp.task('autojs', function () {
  gulp.watch('./src/js/**.js', ['babel'])
});
//監聽所有打包之後的檔案變動，自動重新整理頁面
gulp.task('watch', function () {
  // Create LiveReload server
  livereload.listen();
  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);
});
// 使用 gulp.task('default') 定義預設任務
gulp.task('default', ['less', 'autoless', 'babel', 'autojs',
上一篇: spring 第二課Spring IOC
下一篇: node.js使用Supervisor實作監測檔案修改自動重新開機