純前端表格控件SpreadJS 中導入導出規范以及常見錯誤解決辦法

言 | 問題背景

SpreadJS表格控件有著很強大的純前端的導入導出功能，可以直接在純前端導入導出Excel，通過擴展還可以實現服務器端導入導出。是用戶最常使用的功能之一。

使用規范

JS文件的引入

導入導出功能需要在引入SpreadJS基本JS文件的基礎上額外引入兩個文件：

gc.spread.excelio.xx.x.x.min.js(必選)
FileSaver.js（可選）

1、 gc.spread.excelio.xx.x.x.min.js是導入導出的核心文件，里面包含了導出導出的邏輯，將用戶提供的表格序列化ssjson文件轉換成Excel類型（前端對應為application/zip）的一個blob二進制對象。這里注意因為Excel本身是一個壓縮格式，所以轉換的對象類型對應為application/zip，如果需要轉換為其他形式，請自行處理，例如將該對象base64編碼后轉換為字符串或者流等。

2、 FileSaver.js是第三方開源的一個js組件，用戶做前端文件下載保存的功能。故而不是必須的，也可以自己處理相關操作或者用其他的類型功能組件進行替換。這里注意的是如果需要導出至服務器端，那么不需要引入此js文件。可以直接將blob對象通過請求發至服務器端并在服務器端保存成Excel格式的文件即可。

瀏覽器支持

SpreadJS本身使用了html5的canvas技術，所以瀏覽器支持必須是支持html5的瀏覽器，例如：chrome，firefox，IE9以上等。

而導入導出功能按照上面所說如果要使用filesaver來做前端下載，那么IE瀏覽器需要10以上的版本才能支持FileSaver.js，這里跟SpreadJS本身的瀏覽器支持有些出入。

授權方式

如果是一般的html+js+css這樣的web應用開發，導入導出組件不需要授權。只需要對SpreadJS進行授權即可。

如果是typescript開發常見于:angular,react,vue等框架使用，需要對導入導出組件（ExcelIO）進行單獨授權，像這樣：

GC.Spread.Sheets.LicenseKey = Excel.LicenseKey = "yourkey";

常見問題解決辦法

由于我們示例代碼中導入導出部分加入了try catch的異常捕獲，這樣會導致異常很難定位，這里列出常見可能會出問題的情況：

導入時Excel文件是否為xlsx格式，SpreadJS支持的導入格式必須為xlsx格式
FileSaver.js文件是否引用（這里有個前提，需要做純前端導出，并且使用的是我們官網例子中的方式）
如果使用了FileSaver請注意瀏覽器的支持范圍（參考上面第二點瀏覽器支持）
如果是框架開發，是否對ExcelIO組件進行授權（參考上面第三點授權方式中的描述）

如果上述仍然沒有排查出問題，可以將try catch的異常捕獲去掉來定位原因。如果還是無法排查問題，可以像我們求助處理，一起討論。

關于葡萄城
賦能開發者！葡萄城公司成立于 1980 年，是全球領先的集開發工具、商業智能解決方案、管理系統設計工具于一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟件研發服務，并為中國企業的信息化提供國際先進的開發工具、軟件和研發咨詢服務。葡萄城的控件和軟件產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。

言

在現代的Web應用開發中，與Excel文件的導入和導出成為了一項常見而重要的任務。無論是數據交換、報告生成還是數據分析，與Excel文件的交互都扮演著至關重要的角色。

本文小編將為大家介紹如何在熟悉的電子表格 UI 中輕松導入 Excel 文件，并以編程方式修改表格或允許用戶進行編輯，最后使用葡萄城公司的純前端表格控件SpreadJS組件它們導出回 Excel 文件。

我們將按照以下步驟介紹如何在 JavaScript 中導入/導出到 Excel：

搭建 JavaScript 電子表格項目
編寫 Excel 導入代碼并導入 Excel
將數據添加到導入的 Excel 文件
為表格添加迷你圖
編寫 Excel 導出代碼并導出 Excel

操作步驟

1）搭建 JavaScript 電子表格項目

首先，我們可以使用 NPM 來下載 SpreadJS 文件。可以使用以下的命令行來安裝 SpreadJS：

npm i @grapecity-software/spread-sheets @grapecity-software/spread-sheets-io file-saver jquery

安裝完之后，我們可以在一個簡單的 HTML 文件中添加對這些腳本和 CSS 文件的引用，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>SpreadJS Import and Export Xlsx</title>
    <script
      src="./node_modules/jquery/dist/jquery.min.js"
      type="text/javascript"
    ></script>
    <script
      src="./node_modules/file-saver/src/FileSaver.js"
      type="text/javascript"
    ></script>
    <link
      href="./node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      type="text/javascript"
      src="./node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js"
    ></script>
    <script
      type="text/javascript"
      src="./node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js"
    ></script>
  </head>
  <body>
    <div id="ss" style="height:600px; width :100%; "></div>
  </body>
</html>

然后我們可以在頁面中添加一個腳本來初始化 SpreadJS Workbook 組件和一個 div 元素來作為容器：

    <script type="text/javascript">
        $(document).ready(function () {
            var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        });
    </script>
</head>
<body>
    <div id="ss" style="height:600px ; width :100%; "></div>
</body>

2）編寫 Excel 導入代碼并導入 Excel

我們需要添加一個 input 元素和一個 button 來選擇 Excel 文件。

<body>
  <div id="ss" style="height:700px; width:100%;"></div>
  <input type="file" id="selectedFile" name="files[]" accept=".xlsx" />
  <button class="settingButton" id="open">Open</button>
</body>

然后我們需要使用 spread.import() 方法來導入 Excel 文件。我們將在按鈕的點擊事件中導入用戶選擇的本地文件。

document.getElementById("open").onclick = function () {
  var file = document.querySelector("#selectedFile").files[0];
  if (!file) {
    return;
  }
  workbook.import(file);
};

現在就可以在 JavaScript 電子表格組件中導入和查看 Excel (.xlsx) 文件了，如下所示：

3）將數據添加到導入的 Excel 文件

在這里，我們將使用利潤損失表.xlsx 作為模板，如下圖所示：

現在我們需要添加一個按鈕來將數據添加到導入的 Excel 文件中。

<button id="addRevenue">Add Revenue</button>

可以為該按鈕的點擊事件編寫一個函數來為表格添加一行并復制前一行的樣式，為接下來添加數據做準備。要復制樣式，我們需要使用 copyTo() 函數并傳入：

起始和目標行索引和列索引
復制的行數和列數
復制模式 CopyToOptions 值

document.getElementById("addRevenue").onclick = function () {var sheet = workbook.getActiveSheet();
  sheet.addRows(newRowIndex, 1);
  sheet.copyTo(10,1,
    newRowIndex,1,1,29,GC.Spread.Sheets.CopyToOptions.style
  );
};

下面是用于添加數據和迷你圖的代碼。對于大多數數據，我們可以使用 setValue() 函數。這允許我們通過傳入行索引、列索引和值來設置 Spread 中工作表中的值：

var cellText = "Revenue" + revenueCount++;
sheet.setValue(newRowIndex, 1, cellText);

for (var c = 3; c < 15; c++) {
  sheet.setValue(newRowIndex, c, Math.floor(Math.random() * 200) + 10);
}

在 P 列中設置 SUM 公式以匹配其他行，并為 Q 列設置百分比：

sheet.setFormula(newRowIndex, 15, "=SUM([@[Jan]:[Dec]])");
sheet.setValue(newRowIndex, 16, 0.15);

最后，我們可以再次使用 copyTo() 函數將 R 列到 AD 列的公式從前一行復制到新行，這次使用 CopyToOptions.formula（只復制公式）：

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

4）為表格添加迷你圖

現在我們可以添加迷你圖來匹配其他數據行。為此，我們需要提供一系列單元格來獲取數據以及迷你圖的一些設置。在這種情況下，我們可以指定：

我們剛剛添加數據的單元格范圍
調整迷你圖的設置使其更加美觀

var data = new GC.Spread.Sheets.Range(newRowIndex, 3, 1, 12);
var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
setting.options.seriesColor = "Text 2";
setting.options.lineWeight = 1;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.lowMarkerColor = "Text 2";
setting.options.highMarkerColor = "Text 1";

之后，我們調用 setSparkline() 方法并指定：

迷你圖的位置
數據的位置
迷你圖的方向
迷你圖的類型
之前創建的設置

sheet.setSparkline(
  newRowIndex,
  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();

添加完該代碼后，我們可以在瀏覽器中打開該頁面，并看到 Excel 文件加載到 Spread.Sheets 中，并添加了收入行。

5）編寫 Excel 導出代碼并導出 Excel

最后，我們可以添加一個按鈕來導出包含了剛剛添加的收入行的文件。為了實現這個需求，我們可以在單擊事件處理程序的導出按鈕中調用 Spread.Sheets 中內置的導出方法：

document.getElementById("export").onclick = function () {
  var fileName = $("#exportFileName").val();
  if (fileName.substr(-5, 5) !== ".xlsx") {
    fileName += ".xlsx";
  }
  var json = JSON.stringify(workbook.toJSON());
  workbook.export(
    function (blob) {
      // save blob to a file
      saveAs(blob, fileName);
    },
    function (e) {
      console.log(e);
    },
    {
      fileType: GC.Spread.Sheets.FileType.excel,
    }
  );
};

該代碼從 exportFileName 輸入元素獲取導出文件名。我們可以自定義它的文件名：

<input
  type="text"
  id="exportFileName"
  placeholder="Export file name"
  value="export.xlsx"
/>

然后添加一個調用此函數的按鈕：

<button id="export"Export File</button

添加收入行后，使用導出文件按鈕導出文件。

文件成功導出后，在 Excel 中打開它，可以看到該文件看起來與導入時一樣，只是現在我們添加了一條額外的收入線。

總結

以上就是使用JavaScript 導入和導出 Excel的全過程，如果您想了解更多的信息，歡迎訪問葡萄城官網查看。

者 | 大澈

大家好，我是大澈！

遇到難題，可以進問答群，問題直接群里扔，完事總有人會陪你一起搞。

建立這個平臺的初衷：

1、打造一個問答平臺，一個僅包含前端問題的平臺，讓大家可以高效處理同樣問題。

2、通過不斷積累問題，去練習大家的個人邏輯思維，并順便學習相關的知識點。

3、遇到難題，遇到有共鳴的問題，一起討論，一起沉淀，一起成長。

ONE

需求分析，問題描述

一、需求

點擊導出word按鈕，將頁面任意指定區域的內容，導出為word文檔。

二、問題

1、如何獲取指定內容？

2、如何將HTML內容轉換為Word文檔？

3、如何導出下載Word文檔？

TWO

解決問題，答案速覽

實現代碼如下，復制粘貼即可直接使用。

如果你有時間，具體問題梳理、代碼分析、知識總結，可見第三部分。

一、使用說明

參考網上使用最多的方式，使用 FileSaver.js 和 html-docx-js 庫（或其它將HTML內容轉換為Word文檔的庫）來在Vue組件中導出內容為Word文檔。

但是這種方式只能在服務端實現，在瀏覽器端使用會報錯，這是因為瀏覽器的安全策略限制了對文件系統的直接訪問，以防止惡意腳本濫用用戶的文件系統。

為了避免報錯，您可以考慮以下解決方案：

1、服務器端導出【推薦】：將生成Word文檔的邏輯放在服務器端，通過Vue組件向服務器發送請求，服務器生成并返回Word文檔的下載鏈接或文件。

2、使用其他導出方式：考慮使用其他導出方式，例如將內容轉換為PDF格式或生成HTML格式的文件，以避免瀏覽器限制。

3、考慮使用專門的Word文檔生成庫【導出復雜Word】：如果您需要在瀏覽器中生成復雜的Word文檔，可以考慮使用專門的JavaScript庫，例如docxtemplater或mammoth.js，它們提供了更完整的Word文檔生成功能。

4、考慮使用原生的方式實現【導出簡單Word】。即我們下面要說的，利用a元素的原生文件下載功能來實現Word導出。

二、代碼實例

1、在assets文件夾下新建js文件夾，然后在js文件夾下新建文件exportToWord.js，把下面代碼放進去。

// 導出Word
export const exportToWord = (id, name) => {
// 獲取選中區域Html
const dom = document.getElementById(id)
const content = dom.innerHTML;
const convertedContent = convertToWordDocument(content);

// Html類型數據 轉換為 文件類型數據
const blob = new Blob([convertedContent], { type: 'application/msword' });

// 下載Word文檔
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = name+'.doc' || 'exported.doc';
link.click();
}

//完善Html格式
const convertToWordDocument = (content) => {
const header = `<!DOCTYPE html><html><head><meta charset='utf-8'><title>Exported Document</title></head><body>`;
const footer = `</body></html>`;

return `${header}${content}${footer}`;
}

2、在需要的組件中引入exportToWord函數，直接調用即可。函數接收兩個參數，第一個是指定區域元素的id，第二個是導出Word文檔的名稱。

<template>
<div>
<div id="word_demo">
<h1>標題</h1>
<p style="color: green">綠色字</p>
<p style="color: red">紅色字</p>
<p style="color: dodgerblue">藍色字</p>
</div>
<button @click="downLoad('word_demo', '哈哈哈')">點擊導出word</button>
</div>
</template>

<script>
import { exportToWord } from '@/assets/js/exportToWord'

export default {
methods: {
downLoad(id, name) {
exportToWord(id, name)
},
}
}
</script>

THREE

問題解析，知識總結

一、如何獲取指定內容？

這個比較簡單，相信大家都會，這里簡單提一下。

對于組件可以用ref，對于元素可以用id。

二、如何將HTML內容轉換為Word文檔？

通過new Blob對象，將Html類型數據轉換為生成Word文檔的二進制數據。

關于Blob對象：

1、簡介：

Blob（Binary Large Object）是JavaScript中的一個接口，用于表示不可變的、原始數據的類似文件的對象。

它通常用于處理二進制數據，例如圖像、音頻、視頻等。

Blob對象可以包含任意類型的數據，包括文本、數組緩沖區和其他Blob對象。

Blob對象在處理文件上傳、數據傳輸和媒體處理等場景中非常有用。您可以將Blob對象發送到服務器、保存到本地文件系統或使用其他API進行進一步處理。

2、Blob對象的構造函數接受以下參數：

Blob(blobParts, options)：構造函數接受兩個參數。

第一個參數blobParts是一個數組，其中包含將被包含在Blob對象中的數據。數組的元素可以是字符串、ArrayBuffer、ArrayBufferView、Blob對象或其他類似對象。

第二個參數options是一個可選的對象，用于指定Blob對象的屬性。

在options參數中，可以使用以下屬性：

type：指定Blob對象的MIME類型。默認值為空字符串。

endings：指定以何種方式標準化換行符。可能的值是transparent、native和\r\n。默認值是transparent。

3、以下是一些常用的Blob屬性和方法：

屬性：

Blob.size：返回Blob對象的字節大小。

Blob.type：返回Blob對象的MIME類型。

方法：

Blob.slice(start, end, contentType)：

創建并返回一個新的Blob對象，該對象包含原始Blob對象的指定字節范圍。可選參數contentType用于指定新Blob對象的MIME類型。

Blob.arrayBuffer()：

返回一個Promise，該Promise解析為一個ArrayBuffer對象，其中包含Blob對象的整個內容。

Blob.text()：

返回一個Promise，該Promise解析為一個字符串，其中包含Blob對象的文本內容。

Blob.stream()：

返回一個ReadableStream對象，可以用于流式讀取Blob對象的內容。

Blob.text()：

返回一個Promise，該Promise解析為一個字符串，其中包含Blob對象的文本內容。

Blob.stream()：

返回一個ReadableStream對象，可以用于流式讀取Blob對象的內容。

三、如何導出下載Word文檔？

通過a元素的 download 屬性，來實現文件的導出下載。

在 HTML 中，a元素的 download 屬性用于指定一個下載鏈接，告訴瀏覽器該鏈接是要被下載而不是在瀏覽器中打開。這樣，當用戶點擊鏈接時，瀏覽器會彈出一個下載對話框，提示用戶保存文件到本地設備。

download 屬性的值可以是一個文件名，用于指定用戶保存文件時的默認文件名。當用戶點擊下載鏈接時，瀏覽器會使用該值作為默認文件名，但用戶仍然可以選擇其他文件名保存。

請注意，download 屬性并不是所有瀏覽器都支持的新特性。特別是在移動設備上，某些瀏覽器可能會忽略該屬性并在瀏覽器中打開鏈接。因此，在使用 download 屬性時，最好提供一個備用方案，例如在鏈接的文本或旁邊添加一段說明，告訴用戶右鍵點擊鏈接并選擇 "保存鏈接" 或類似選項來下載文件。

- END -

在線咨詢

上一篇：java將html轉為pdf
下一篇：一篇文章搞定Python 發郵件，插入附件，插入圖片，html

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商