前言|问题背景

　　作为一名优秀的打工人，Excel是大家上班中必不可少的办公软件。随着互联网时代的到来，越来越多的公司开始使用各种B/S系统来处理表格数据文件。那么有没有一种可以直接在浏览器中使用的Excel插件去处理数据呢？答案是肯定的。本文小编将为大家介绍如何在Vue框架中集成SpreadJS在线表格插件（以下简称为“SpreadJS”）和在线表格编辑器（类Excel浏览器插件）实现在浏览器中使用Excel插件来处理数据。

　　在本教程中，我们将使用node.js，请确保已安装最新版本，除此之外还需要使用软件Visual Studio Code(以下简称“VSCode”)作为编程环境，请您以管理员身份运行它。

如何在Vue框架中集成表格插件（SpreadJS）

在本节内容中，小编将向大家展示如何在Vue框架引入表格插件（SpreadJS）资源并实现简单的上传文件、下载文件两个功能。

在Vue中集成SpreadJS：

1．首先使用管理员权限打开VSCode软件，然后再用VSCode打开初始代码文件（文章下方资源包中）或者也可以选择自己创建一个Vue项目，相关创建语法如下：

# npm 6.x
npm create vite@latest Vue3-spread-ts --template Vue-ts
# npm 7+, extra double-dash is needed:
npm create vite@latest Vue3-spread-ts --template Vue-ts
# yarn
yarn create vite Vue3-spread-ts --template Vue-ts
# pnpm
pnpm create vite Vue3-spread-ts -- --template Vue-ts

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（npm创建Vue指令）

2．创建完Vue项目之后，打开项目中的package.json文件夹，这个时候我们需要在文件夹中引入SpreadJS组件包：

{
  "name": "vue3-spread-ts",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@grapecity/spread-excelio": "15.1.0",
    "@grapecity/spread-sheets": "15.1.0",
    "@grapecity/spread-sheets-barcode": "15.1.0",
    "@grapecity/spread-sheets-charts": "15.1.0",
    "@grapecity/spread-sheets-languagepackages": "15.1.0",
    "@grapecity/spread-sheets-pdf": "15.1.0",
    "@grapecity/spread-sheets-pivot-addon": "15.1.0",
    "@grapecity/spread-sheets-print": "15.1.0",
    "@grapecity/spread-sheets-resources-zh": "15.1.0",
    "@grapecity/spread-sheets-shapes": "15.1.0",
    "@grapecity/spread-sheets-tablesheet": "15.1.0",
    "@grapecity/spread-sheets-vue": "15.1.0",
    "element-plus": "^2.2.5",
    "file-saver": "^2.0.5",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "typescript": "^4.5.4",
    "vite": "^2.9.9",
    "vue-tsc": "^0.34.7"
  }
}

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（需要引入的spreadJS组件）

引入这些组件后，使用npm install命令来下载这些组件（第一次下载可能需要一些时间）。下载完成之后使用命令npm run dev启动项目，如果在浏览器中看可以打开表示项目启动安装成功。

3．项目启动后，打开src\components目录下的OnlineSpread.Vue文件，这个文件是Vue框架集成SpreadJS主要代码的存放位置。（如果想自定义.Vue文件编写代码也可以，但注意需要修改APP.Vue文件中的代码import onlineSpread from './components/OnlineSpread.Vue'为自定义的文件名称）。

3.1为了将SpreadJS集成到Vue框架中，需要引入一些资源到项目中，这些资源包含了SpreadJS的主要资源、文件导入导出等。

import {defineComponent} from 'Vue'
 
// SpreadJS组件运行时资源
import * as GC from "@grapecity/spread-sheets"
 
//引入符合自己项目主题的样式
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
 
//设置中文
import "@grapecity/spread-sheets-resources-zh"
 
// 引入导入导出文件相关的资源
import * as ExcelIO from "@grapecity/spread-excelio"
 
//引入文件导出
import {saveAs} from 'file-saver'
 
//引入打印相关资源
import "@grapecity/spread-sheets-print"
 
//引入导出pdf资源
import "@grapecity/spread-sheets-pdf"
 
 
 
//引入语言资源（支持中英文）
GC.Spread.Common.CultureManager.culture('zh-cn')

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（SpreadJS引入到Vue中的资源信息）

　　3.2引入资源后，发现浏览器显示你的表格内容只有一行，这是因为表格的格式还未被设置，需要用SpreadJS的hostStyle标签和workbookInitialized标签来设置表格的大小和宽度。具体设置方法是先在div标签中设置hostStyle的格式（注意不要忘了return hostStyle标签），然后在setup方法中设置高度格式即可。

// 引入组件
components:{
        'gc-spread-sheets':GcSpreadSheets
    }
 
//div标签
 
<gc-spread-sheets :hostStyle="hostStyle" @workbookInitialized="initWorkbook">
 
  </gc-spread-sheets>
 
 //设置高度格式，写在setup方法中
        const hostStyle={
            height:'90vh'
        }
return{
            hostStyle
        }

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（设置表格大小格式的代码）

上传文件和下载文件：

上传文件、下载文件的方法与设置表格大小的方法如出一辙，首先也是在div标签中设置对应的按钮，

       <el-upload
            class="upload-demo"
            accept=".xlsx"
            :before-upload="importFile"
            action=''>
 
            <el-button type="primary">上传文件</el-button>
 
        </el-upload>
 
        <el-button type="primary" @click="downloadFile">下载文件</el-button>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（在div标签中设置上传文件和下载文件的按钮）

然后在setup方法中设置上传文件和下载文件的方法（具体可以参考SpreadJS的API参考文档）。

 //文件上传的方法
        const importFile = (file) => {
            let io = new ExcelIO.IO()
            // excelio打开文件，回调函数中的参数时SpreadJS支持的json格式
            io.open(file,(fileJSON) => {
                // fromJSON中第二个参数为导入文件的控制参数，默认均为false,根据自己的需求添加,都不要修改时可不传
                spread.fromJSON(fileJSON,{
                    ignoreFormula: false,    //导入忽略公式    
                    ignoreStyle: false,      //导入忽略样式
                    frozenColumnsAsRowHeaders: false,   //将冻结列当作行头
                    frozenRowsAsColumnHeaders: false,   //将冻结行作为列头
 
                    // 导入文件不立即计算. Excel文件保存时会自动计算,当文件比较大时,可以导入后不计算,提高导入效率.
                    doNotRecalculateAfterLoad: false    
                })
            })
            return false
        }
        //文件下载的方法
        const downloadFile = () => {
        //获取当前工作簿json,toJSON也可以根据需求设置参数,参考学习指南导入导出json
            let fileJson = spread.toJSON()
            //创建文件IO实例
            let io = new ExcelIO.IO()
            //保存文件
            io.save(fileJson,(blob)=>{
                // excelIO将文件转化为blob,传递给回调函数,然后执行file-saver的saveAs保存excel文件.
                saveAs(blob,'导出文件.xlsx')
            },(e) => {
                console.log(e)
            })
        }