纯前端表格控件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小时内与您取得联系。

整合营销服务商