3

新人必看！手把手教你如何使用浏览器表格插件（上） - 葡萄城技术团队

 1 year ago
source link: https://www.cnblogs.com/powertoolsteam/p/17431044.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

本文由葡萄城技术团队于博客园原创并首发。葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

前言|问题背景

　　作为一名优秀的打工人，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)

            })

        }

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（设置上传文件和下载文件的代码）

做完这些之后便可以在浏览器中实现上传文件、修改文件内容并下载文件的操作了，同时还可以体验和使用表格插件（用法和Excel高度相似）。

PS：细心的网友应该发现了，浏览器中只显示了表格，并没有显示Excel中上方的编辑器内容。原因是由于文章长度限制无法一次介绍完，小编将Vue集成在线编辑器的内容放在了下一篇文章中。

整理的完整源码附文章下方day1文件夹中的vue3-spreadJS-ts文件，直接在终端中使用npm run dev指令运行即可。

源码链接：https://pan.baidu.com/s/13bZTosXVBe3Jy_z-rFhoog（百度网盘）提取码：abcd


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK