使用SpreadJS 實現 JavaScript 中導入和導出Excel文件

2021-01-14 泡泡網
使用 SpreadJS 實現 JavaScript 中導入和導出Excel文件
2019年07月19日 16:25作者:黃頁編輯:黃頁

JavaScript是一個涵蓋多種框架、直譯式、可以輕鬆自定義客戶端的腳本語言,在 Web 應用程式中,更加易於編碼和維護。而Excel 作為一款深受用戶喜愛的電子表格工具,藉助其直觀的界面、出色的計算性能和圖表工具,已經成為數據統計領域不可或缺的軟體之一。

如果有一款產品,能夠將二者完美融合,將在前端表格數據處理、數據填報、數據可視化、在線文檔等領域大放異彩。SpreadJS,正是這樣一款功能布局與Excel高度類似,無需大量代碼開發和測試即可實現數據展示、前端 Excel 導入導出、圖表面板、數據綁定等業務場景的純前端表格控制項。

訪問 SpreadJS 官網了解更多產品動態:https://www.grapecity.com.cn/developer/spreadjs

使用JavaScript實現 Excel 的導入和導出

通過純JavaScript,您完全可以實現導入和導出Excel文件功能,並為最終用戶提供與這些文件進行I/O交互的界面。在本篇教程中,我將向您展示如何藉助SpreadJS,在JavaScript中輕鬆實現導入和導出Excel文件的操作,以及將SpreadJS組件添加到HTML頁面是多麼的容易。

導入和編輯Excel文件後完成的頁面

工欲善其事,必先利其器

請下載SpreadJS 純前端表格控制項,以便同步體驗

設置JavaScript的電子表格項目

創建一個新的HTML頁面並添加對SpreadJS下載包中Spread.Sheets腳本和CSS文件的引用:

然後在初始化Spread.Sheets組件的頁面中添加一個腳本,並使用div元素來包含它(因為SpreadJS電子表格組件使用了Canvas 繪製界面,所以這是初始化組件所必需的一步):

添加Excel導入代碼

我們需要創建一個客戶端ExcelIO組件的實例,並用它來實際打開 Excel 文件:

var excelIO = new GC.Spread.Excel.IO();

然後我們需要添加一個導入文件的函數。在此示例中,我們導入本地文件,但您可以對伺服器上的文件執行相同的操作。如果要從伺服器端導入文件,則需要引用該位置。以下是輸入元素的示例,用戶可以在其中輸入文件的位置:

       <input type="text" id="importUrl" 

value="http://www.testwebsite.com/files/TestExcel.xlsx"

style="width:300px" />

完成上述步驟後,您可以直接在腳本代碼中訪問該值:

var excelUrl = $("#importUrl").val();

以下導入函數的代碼只使用本地文件作為「excelUrl」變量:

無論您是在伺服器上還是在本地引用文件,都需要在 $(document).ready函數內的腳本中添加以下內容:

將數據添加到Excel文件

在本教程中,我們以導入一個名為 「Profit loss statement」 的Excel模板為例。

Excel模板

現在我們可以使用Spread.Sheets腳本在此文件中添加另一個收入行。讓我們在頁面上添加一個按鈕來執行此操作:

       Add Revenue 

我們可以為該按鈕的click事件綁定一個函數,用以執行添加行並複製上一行的樣式。要複製樣式,我們需要使用copyTo函數並傳入:

· 原點和目標行和列索引

· 行數和列數

· 樣式的CopyToOptions值

document.getElementById("addRevenue").onclick = function () {

var sheet = workbook.getActiveSheet();

sheet.addRows(11, 1);

sheet.copyTo(10, 1, 11, 1, 1, 29, GC.Spread.Sheets.CopyToOptions.style);

}

用於添加數據和Sparkline的所有以下腳本代碼都將包含在此按鈕單擊事件處理程序中。對於大多數數據,我們可以使用setValue函數。這允許我們通過傳入行索引、列索引和值在Spread中的工作表上設置值:

sheet.setValue(11, 1, "Revenue 8");

for (var c = 3; c < 15; c++) {

sheet.setValue(11, c, Math.floor(Math.random() * 200) + 10);

}

在P列中設置SUM公式以匹配其他行,並為Q列設置百分比:

sheet.setFormula(11, 15, "=SUM([@[Jan]:[Dec]])")

sheet.setValue(11, 16, 0.15);

最後,我們可以再次使用copyTo函數將前一行中的公式複製到R到AD列的新行,這次使用CopyToOptions.formula:

sheet.copyTo(10, 17, 11, 17, 1, 13, GC.Spread.Sheets.CopyToOptions.formula);

添加迷你圖

現在我們可以添加一個迷你圖來匹配其他數據行。要做到這一點,我們需要提供一系列單元格來獲取數據和一些迷你圖設置。在這種情況下,我們可以指定:

· 我們剛剛添加數據的單元格範圍

· 設置使迷你圖看起來像同一列中的其他迷你圖

然後,我們調用setSparkline方法並指定:

· 迷你圖的位置

· 數據的位置

· 迷你圖的方向

· 迷你圖的類型

· 我們創建的設置

sheet.setSparkline(11, 2, data, GC.Spread.Sheets.Sparklines.DataOrientation.horizontal, GC.Spread.Sheets.Sparklines.SparklineType.line, setting);

如果您現在嘗試運行代碼,可能會很慢,這是因為每次更改數據和添加樣式時工作簿都會重新繪製。為了大幅提升速度和性能,Spread.Sheets提供了暫停繪畫和計算服務的功能。讓我們通過代碼在添加行和數據之前暫停兩者,並在完成數據加載後恢復:

workbook.suspendPaint();

workbook.suspendCalcService();

//...

workbook.resumeCalcService();

workbook.resumePaint();

在添加該代碼後,我們可以在Web瀏覽器中打開頁面,並將Excel文件加載到Spread.Sheets中,並實現添加行的功能。

重要提示:請注意,Chrome出於安全目的不允許您打開本地文件,因此您需要使用Firefox等網絡瀏覽器才能成功運行此代碼。當然,如果您從網站URL加載文件時,在任何瀏覽器中都可以打開。

用SpreadJS 在網頁上實現的Excel模板

帶有用於添加收入行按鈕的Excel模板

添加Excel導出代碼

我們還可以實現:在網頁中將帶有添加行功能的Spread.Sheets 導出成Excel文件。在這裡,我們使用Spread.Sheets中內置的客戶端ExcelIO代碼:

該代碼從exportFileName的輸入元素中直接獲取導出的文件名。我們可以定義它並讓用戶以這樣的方式命名文件:

在這裡,我們繼續為調用此函數添加一個按鈕:

Export File

document.getElementById("export").onclick = function () {

ExportFile();

}

導入和編輯Excel文件後完成的頁面

在實現添加行功能後,可以使用「導出文件」的按鈕導出Excel。請確保添加FileSaver外部庫,以便用戶將文件保存到他們本地:

相關焦點

  • 如何使用JavaScript實現前端導入和導出excel文件
    1.2 實現一鍵導入excel文件並生成table表格導入excel文件的功能我們可以用javascript原生的方式實現解析, 比如可以用fileReader這些原生api,但考慮到開發效率和後期的維護, 筆者這裡採用antd的Upload組件和XLSX來實現上傳文件並解析的功能.
  • javascript中import和export的區別及用法總結
    import 和require的區別,import 和js的發展歷史息息相關,歷史上 js沒有模塊(module)體系,無法將一個大程序拆分成互相依賴的小文件,再用簡單的方法拼裝起來。 在 ES6 之前,社區制定了一些模塊加載方案,最主要的有 CommonJS 和 AMD 兩種。
  • 解決import 導入 CommonJS 模塊報錯的問題
    不同模塊之間的不兼容造成了模塊導入/導出句法的不兼容,在代碼執行時會報錯,給開發帶來了很大問題。假設我們的項目入口文件 main.js 內容如下:入口文件所導入的 numbers.js 內容如下:安裝 rollup.js 之後在項目裡運行打包命令:rollup main.js --file bundle.js --format iife執行上述命令後會看到執行報錯,運行失敗:問題原因rollup.js
  • SpreadJS 純前端表格控制項應用案例:風險指標補錄系統
    ,實現風險部指標的統一管理、線下補錄報送的平臺化管理、內部管理報表的生成查看、各類常規補錄和快速補錄,以及補錄需求的監控定位和跟蹤。系統統一了管理模板的設計和制定,基於SpreadJS構建了填報模板的設計模塊,允許用戶在線填報表單,並在模板中直接指定指標入庫的位置、數據校驗規則和權限管控。 項目架構圖
  • 匯總csv文件其實很簡單,用excel三步即可搞定,並且支持數據更新
    Hello,大家好,今天跟大家分享下我們如何快速的匯總多個csv文件,這個也是之前一個粉絲問道的問題,前幾太忙沒時間寫,今天就跟大家分享下Csv文件常見於我們從系統中導出的文件,或者是下載的一些網頁的數據,因為是從系統中導出的文件,他們的格式都是一摸一樣的
  • 用Java語言巧妙實現javascript的運行
    Java前言在學習開發的過程中javascript是每位程式設計師小盆友都得掌握的一種方法,他們可以說是貫穿了整個Java開發的語言,下面給大家演示一下在Java中如何完美運行javascript案例,跟著小編一起來學習一下吧
  • JavaScript引入模塊的歷史簡介
    例如,我們有一個 sayHi.js 文件導出了一個函數://  sayHi.js export function sayHi(user) {   alert(`Hello, ${user}!`); } ……然後另一個文件可能導入並使用了這個函數://  main.js import {sayHi} from '.
  • SpreadJS 用於開發多人協作「在線excel」系統的優勢
    這些問題,通常表現為: 1.跨部門、地區協作不便 2.過度依賴文件夾共享的形式,不能確保文檔的安全性 3.沒法紀錄和體現職工對文本文檔的意見和評價 4.文檔記錄發生變更時,無法及時通知到相關部門和員工 5.文檔無法在線協同編輯,缺失必要的流程管控 6.多人共同編輯一個文檔,無法留存修改記錄和歷史版本
  • 前端組件/庫打包利器rollup使用與配置實戰
    Rollup 對代碼模塊使用新的標準化格式,這些標準都包含在 JavaScript 的 ES6 版本中,而不是像CommonJS 和 AMD這種特殊解決方案。rollup最大的亮點就是Tree-shaking,即可以靜態分析代碼中的 import,並排除任何未使用的代碼。這允許我們架構於現有工具和模塊之上,而不會增加額外的依賴或使項目的大小膨脹。
  • JavaScript 模塊介紹
    但隨著代碼規模的增大,開始把代碼整理到模塊中,出現了一些庫:AMD - 最早期的一個模塊規範,最開始由 require.js 實現了這個規範。CommonJS - Node.js 指定的規範UMD - 統一模塊規範,和 AMD, CommonJS 規範兼容。
  • JavaScript組件模式深入淺出
    我們傳入一個全局對象作為匿名函數的參數,我們利用這個參數導入我們的變量到全局對象中,這樣做比隱式的聲明全局變量要乾淨和快速的多。下面是一個例子(function ($, YAHOO) {           }(jQuery, YAHOO)); 模塊導出(Module Export)有時候我們不只是想定義一個模塊,還想直接使用它,我們可以使用匿名函數的返回值來實現。
  • excel表格中怎麼導入來自文本中的數據
    excel表格中怎麼導入來自文本中的數據 文本數據指以文本文件【.txt】存放的數據。
  • javascript基礎修煉——手把手教你造一個簡易的require.js
    概述許多前端工程師沉浸在使用腳手架工具的快感中,認為require.js這種前端模塊化的庫已經過氣了,的確如果只從使用場景來看,在以webpack為首的自動化打包趨勢下,大部分的新代碼都已經使用CommonJs或ES Harmony規範實現前端模塊化,require.js的確看起來沒什麼用武之地。
  • 明厚天股份:用SpreadJS 搭建數據填報採集平臺
    作為一家專注大數據、人工智慧解決方案,立足於教育、醫療、軍工領域的軟硬體產品供應商,明厚天股份在近十年的發展歷程中,始終專注於教育信息化、智慧城市、智能交通、智慧數據IT中心等關鍵技術和產品的研發、系統集成和運營維護,具備了豐富的實踐經驗和成功案例。
  • 0基礎學習JavaScript一定要知道如何使用VS2019去編寫代碼
    在圖2左側選擇「Web」下面的「HTML頁」,使用默認的名稱「HtmlPage1.html」,點擊「添加」按鈕。VS2019就會為我們創建出一個具有Html代碼的頁面。JavaScript代碼就是在Html頁面上使用的,在瀏覽器中解釋和執行。
  • 使用reveal.js製作精美的網頁版PPT
    reveal.js可以把 Markdown 文件轉為類似 PPT 的演示文稿,輕快省力,減少排版上的時間,讓演講者更專於文字內容;同時,也獲得 PPT 所不具有的靈活性製作發布靈活、不限應用,不限平臺, 只需修改或打開 HTML 文件豐富的特性,支持過渡動畫、代碼高亮、視頻背景、Markdown 語法、導出 PDF 等極度輕量,佔用空間和內存少說了這麼多revealjs的優點,接下來我們就來學習如何使用它吧
  • video.js 7.0 文件結構分析
    8. big-play-button.js 播放器中心的播放按鈕 9. button.js 添加播放按鈕的實現 10. clickable-component.js 如果想實現一個支持點擊事件和鍵盤事件具備交互功能的組件可以繼承該類
  • 初識javascript,JS的歷史_騰訊新聞
    javascript和H5的關關係 什麼是HTML5? 最初是為了實現表單驗證 JavaScript能完成的功能多得去了?
  • Sketchup文件怎樣導入到SolidWorks中?
    有朋友問我:Sketchup文件如何導入到SolidWorks中?在這裡我整理了一下具體的操作方法。先看看兩款軟體,Sketchup是景觀、建築設計用的3D軟體,SolidWorks是機械設計用的3D軟體,它們的文件格式確實不能直接通用,所以一般Sketchup文件導入到SolidWorks中,要藉助其他軟體。下面是我的日常操作方法,我藉助的是meshlab這個軟體(其他類似軟體均可)。
  • python項目實踐分享:使用pandas處理大型CSV文件
    CSV(Comma Separated Values)作為一種逗號分隔型值的純文本格式文件,在實際應用中經常用到。如資料庫數據的導入導出、數據分析中記錄的存儲等。因此很多語言都提供了對CSV文件處理的模塊。Python也不例外,其模塊csv提供了一系列與CSV處理相關的 API。