基于Next.js实现在线Excel的详细代码
目录
- 认识 Next.js
- 实战之旅
如果要从头开始使用 React 构建一个完整的 Web 应用程序，需要哪些步骤？
这当然不像把大象装进冰箱那么简单，只需要分成三步：打开冰箱，拿起大象，塞进冰箱就好。
我们需要考虑细节有很多，比如：
- 必须使用打包程序（例如 webpack）打包代码，并使用 Babel 等编译器进行代码转换。
- 需要针对生产环境进行优化，例如代码拆分。需要对一些页面进行预先渲染以提高页面性能和 SEO，可能还希望使用服务器端渲染或客户端渲染。
- 必须编写一些服务器端代码才能将 React 应用程序连接到数据存储。
- 这些问题都是我们需要注意的，但是Next.js的出现，完美地解决了这些问题，用一个框架即可统统拿下。
- Next.js框架具有正确的抽象级别和出色的“开发人员体验”，包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能，无需任何配置，开箱即用，这些内容让开发团队在编写代码时有“下雨天配巧克力”一般丝滑的体验。
认识 Next.js
Next.js是一款React 开发框架，它可以帮助我们构建 React 应用程序。作为一个轻量级React服务端渲染应用框架，它有许多内置功能，包括不仅限于：
- 直观的、 基于页面的路由系统（并支持动态路由）
- 预渲染——支持在页面级的 静态生成 (SSG) 和 服务器端渲染 (SSR)
- 自动代码拆分，提升页面加载速度
- 具有经过优化的预取功能的客户端路由
- 内置 CSS 和 Sass 的支持，并支持任何 CSS-in-JS 库
- 开发环境支持快速刷新
- 利用 Serverless Functions 及 API 路由 构建 API 功能
- 完全可扩展
当前，Next.js 正在被用于数以万计的的网站和 Web 应用程序，包括许多享誉世界的知名公司和头部品牌。可以说，它肉眼可见的易用性牢牢把握了用户的心，不论是对于企业用户还是小微开发者，从基础框架到发布运维，它都提供了相对应的解决方案。
接下来，我们将带大家基于Next.js实现类Excel控件的在线表格编辑的功能。
实战之旅
首先需要安装Node.js，并且Node.js版本需要高于10.13，
安装流程可以参考：https://nodejs.org/en/
安装完成后，就可以创建Next.js应用。
打开终端窗口，进入到创建应用的程序目录，然后执行以下命令：
# 其背后的工作是通过调用create-next-app工具完成的，该工具会创建一个Next.js应用程序。 npx create-next-app nextjs-spreadjs
安装完成后执行npm run dev，如果项目能正常启动，就表示工程已经正常创建，默认创建好的工程会启动在3000端口，展示如下：
然后可以将项目pages下的index.js中一些不必要的内容元素删除，在项目更路径下面加载我们接下来写好的类Excel表格控件.
最终展示效果如图：
其中红色区域为表格主体，上方的工具栏是在线表格编辑器。在实际项目中，我们可以单独引入组件运行时，也可以将在线表格编辑区全部引入（在线表格编辑器会包含一个与之关联的运行时）。
首先，我们需要在package.json中加入如下依赖：
"@grapecity/spread-sheets": "15.1.0", "@grapecity/spread-sheets-react": "15.1.0", "@grapecity/spread-excelio": "15.1.0", "@grapecity/spread-sheets-charts": "15.1.0", "@grapecity/spread-sheets-print": "15.1.0", "@grapecity/spread-sheets-pdf": "15.1.0", "@grapecity/spread-sheets-barcode": "15.1.0", "@grapecity/spread-sheets-shapes": "15.1.0", "@grapecity/spread-sheets-resources-zh": "15.1.0", "@grapecity/spread-sheets-languagepackages": "15.1.0", "@grapecity/spread-sheets-pivot-addon": "15.1.0", "@grapecity/spread-sheets-tablesheet": "15.1.0", "@grapecity/spread-sheets-designer": "15.1.0", "@grapecity/spread-sheets-designer-resources-cn": "15.1.0", "@grapecity/spread-sheets-designer-react": "15.1.0"
接下来，我们在项目根目录下新建components文件夹，并创建OnlineDesigner.js文件，在该文件中，我们引入spreadjs相关资源，并引入组件运行时。详细代码如下所示：
import React,{useState,useEffect} from "react"
import '@grapecity/spread-sheets-resources-zh';
import GC from '@grapecity/spread-sheets'
import {SpreadSheets,Worksheet} from '@grapecity/spread-sheets-react'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013lightGray.css'
GC.Spread.Common.CultureManager.culture("zh-cn");
export default function OnlineSpread(){
const [spread,setSpread] = useState(null)
const initSpread = (entity) => {
setSpread(entity)
//获取活动工作表
let sheet = entity.getActiveSheet()
//设置数据
sheet.setValue(0,0,'Grapecity')
}
return(
<>
<SpreadSheets
hostStyle={{height:'98vh'}}
workbookInitialized={initSpread}
></SpreadSheets>
</>
)
}
创建完成之后，我们需要在pages目录下的index.js中引入定义好的组件。这里要注意的时，在引入组件时不要去使用服务端渲染（SSR），否会出现document undefined的错误，这种错误，一般和nodejs无法操作dom对象有关，具体的引入方法为：
const OnlineSpread = dynamic(() => import('../components/OnlineSpread.js'),{
ssr: false
})
引入完成之后，我们就可以在当前页面中使用了，精简index.js中的代码，最终代码如下：
import Head from 'next/head'
import Image from 'next/image'
import dynamic from 'next/dynamic'
const OnlineSpread = dynamic(() => import('../components/OnlineSpread.js'),{
ssr: false
})
const OnlineDesigner = dynamic(() => import('../components/OnlineDesigner.js'),{
ssr: false
})
export default function Home() {
return (
<div>
<Head>
<title>Nextjs-SPreadJS</title>
<meta name="description" content="Generated by create next app" />
</Head>
<OnlineSpread/>
</div>
)
}
执行npm run dev，显示效果如下：
接下来。我们需要继续在components文件夹下新建一个OnlineDesigner.js，引入在线表格编辑器：
import React,{useState,useEffect} from "react"
import '@grapecity/spread-sheets-designer-resources-cn';
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-barcode";
import "@grapecity/spread-sheets-charts";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-languagepackages";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-pdf";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-resources-zh";
import "@grapecity/spread-sheets-designer-resources-cn";
import {Designer} from '@grapecity/spread-sheets-designer-react';
import "@grapecity/spread-sheets-resources-zh"
import GC from "@grapecity/spread-sheets"
GC.Spread.Common.CultureManager.culture('zh-cn')
export default function OnlineDesigner(){
const [designer,setDesigner] = useState(null)
const initDesigner = (entity) => {
setDesigner(entity)
let spread = entity.getWorkbook()
let sheet = spread.getActiveSheet()
sheet.setValue(0,0,'Grapecity')
}
return(
<>
<Designer
styleInfo={{height:'98vh'}}
designerInitialized={initDesigner}
></Designer>
</>
)
}
编写完成之后，在index.js中引入集成即可：
import Head from 'next/head'
import Image from 'next/image'
import dynamic from 'next/dynamic'
const OnlineDesigner = dynamic(() => import('../components/OnlineDesigner.js'),{
ssr: false
})
export default function Home() {
return (
<div>
<Head>
<title>Nextjs-SPreadJS</title>
<meta name="description" content="Generated by create next app" />
</Head>
{/* <OnlineSpread/> */}
<OnlineDesigner/>
</div>
)
}
执行npm run dev，显示效果如下：
到这里我们就顺利完成了基于Next.js实现在线表格编辑功能。
本文内实例获取地址：https://gitee.com/GrapeCity/nextjs-spreadjs
大家如果对更多应用实例感兴趣，可以查看：
https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html
到此这篇关于基于 Next.js实现在线Excel的文章就介绍到这了,更多相关Next.js在线Excel内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
react框架next.js学习之API 路由篇详解
目录 正文 使用方式 API 路由匹配 API 处理 API 配置 边缘计算支持 自定义 API 注意点 总结 正文 next.js 作为最热门的 react 框架,不过这么久了好像国内使用率一直不太高.最近在研究做个小项目正好做下笔记,有兴趣的可以一起来学习. next.js 首页标榜的 12 个特性之一就是 API routes,简单的说就是可以 next.js 直接写 node 代码作为后端服务来运行.因此我们可以直接使用 next.js 直接维护一个全栈项目,听起来很香的样子. 使用方式
-
next.js初始化参数设置getServerSideProps应用学习
目录 使用 ts 定义 context 实现 请求 API 问题 特殊处理 - 404.跳转.异常 总结 使用 getServerSideProps 是 next.js 中的一项特色功能,可以让我们在给页面设置一些初始的 props 参数. getServerSideProps 是定义在页面中的 API,但是其执行环境是 node 端,而不是客户端,一般常见使用场景为: 页面前置权限校验 页面必备参数获取 使用时需要在对应的 page 文件中 export getServerSideProps
-
使用next.js开发网址缩短服务的方法
一.网址缩短服务的原理 网址缩短服务,并不是压缩算法.而是把原网址存储在数据库中,用短的参数做key,届时取出原始url,并跳转. 因此,短网址最适合用key/value数据库. 那么,短网址的唯一参数,如何生成呢?其实用的就是10进制转62进制. function string10to62(number) { var chars = '0123456789abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ'.split(''), radix
-
Next.js脚手架完整搭建封装的方法步骤
针对实际的开发场景(SEO优化需求),我们直接使用next.js脚手架创建的项目还无法直接进行开发,需要再次进行配置封装搭建,这里分享一套自己的完整封装搭建给有需要的小伙伴使用; 内容包括:(1)sass样式配置;(2)axios拦截封装;(3)action模块化;(4)reducer模块化;(5)redux搭建;(6)dispatch示范;(7)saga中间件配置;(8)saga拦截示范;(9)useEffect异步请求示范;(10)getServerSideProps/getStaticPr
-
next.js getServerSideProps源码解析
目录 SSR 处理 动态加载处理 总结 SSR 处理 老规矩,昨天写了关于 getServerSideProps 的内容,今天趁热写一下 getServerSideProps 相应的源码,看看 next.js getServerSideProps 是怎么实现的,还有什么从文档无法知晓的细节. 我们先从 SSR 时相关的 getServerSideProps 处理看起,源码排查步骤上一步已经有所介绍,本篇不再多说,在 SSR 时,next.js 会调用 doRender 来进行渲染,其中会再次调用
-
Next.js入门使用教程
目录 简介 创建Next.js项目 手动创建Next.js项目 creact-next-app快速创建项目 Pages 路由 Link Router 参数传递与接收 动态路由 钩子事件 获取数据 getStaticProps 构建时请求数据 getServerSideProps 每次访问时请求数据 CSS支持 添加全局样式表 添加组件级CSS 简介 Next.js 是一个轻量级的 React 服务端渲染应用框架. 官网链接:www.nextjs.cn/ 优点: 零配置 自动编译并打包.从一开始就
-
基于Next.js实现在线Excel的详细代码
目录 认识 Next.js 实战之旅 如果要从头开始使用 React 构建一个完整的 Web 应用程序,需要哪些步骤?这当然不像把大象装进冰箱那么简单,只需要分成三步:打开冰箱,拿起大象,塞进冰箱就好. 我们需要考虑细节有很多,比如: 必须使用打包程序(例如 webpack)打包代码,并使用 Babel 等编译器进行代码转换. 需要针对生产环境进行优化,例如代码拆分.需要对一些页面进行预先渲染以提高页面性能和 SEO,可能还希望使用服务器端渲染或客户端渲染. 必须编写一些服务器端代码才能将 Re
-
js基于FileSaver.js 浏览器导出Excel文件的示例
本文介绍了js基于FileSaver.js 浏览器导出Excel文件,分享给大家,也给自己做个笔记 限制一:不同浏览器对 blob 对象有不同的限制 具体看看下面这个表格(出自FileSaver.js): Browser Constructs as Filenames Max Blob Size Dependencies Firefox 20+ Blob Yes 800 MiB None Firefox < 20 data: URI No n/a Blob.js Chrome Blob Yes
-
基于原生JS实现分页效果的示例代码
这个只是一个分页的demo,主要是思路整理(很久之前项目用的东西) 分页实现的效果 主要是 左侧上一页 右侧是下一页 中间显示主要是超过5个显示 省略号 然后是可配置选项 实现之后的效果 首先需要初始化该对象的一些基本属性,显示总页码数,中间显示的页面数, 添加一个回调函数,在页面变化激活回调函数并返回当前页面和一些需要的其他参数 init为对象初始化的方法(里面的参数都是可以写成活的,我这里偷懒了所以写成死的了) 这个里的 z_page 可以接是接口返回的总页数 function Page(o
-
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
本文实例讲述了JavaScript实现写入文件到本地的方法.分享给大家供大家参考,具体如下: 工作中有时需要通过 JavaScript 保存文件到本地,我们都知道 JavaScript 基于安全的考虑,是不允许直接操作本地文件的. IE 可以通过 VB 插件的方式进行,而 Chrome 和 firefox 都不支持 JavaScript 向本地写入文件,所以 VB 插件的方式存在兼容性问题. 那有没有适合的方法呢?答案是肯定的,我们可以通过 FileSaver.js 这个小插件实现我们的需求.下
-
webpack+vue.js构建前端工程化的详细教程
本篇主要介绍三块知识点: node.js ,vue.js,webpack前端工程化 ,希望对您能有所帮助. 本文来自于csdn,由火龙果软件Alice编辑推荐. node.js基本入门 node.js介绍 node.js可以让javascript程序在后端运行起来.我们之前所熟知的javascript都是运行在前端浏览器,我们编写好了javascript代码后,由浏览器解释执行.而node.js,可以让我们编写javascript,然后在后端运行起来.现在的javascript和java.pyt
-
基于cropper.js封装vue实现在线图片裁剪组件功能
效果图如下所示, github:demo下载 cropper.js github:cropper.js 官网(demo) cropper.js 安装 npm或bower安装 npm install cropper # or bower install cropper clone下载:下载地址 git clone https://github.com/fengyuanchen/cropper.git 引用cropper.js 主要引用cropper.js跟cropper.css两个文件 <scri
-
PHP基于新浪IP库获取IP详细地址的方法
本文实例讲述了PHP基于新浪IP库获取IP详细地址的方法.分享给大家供大家参考,具体如下: <?php class Tool{ /** * 获取IP的归属地( 新浪IP库 ) * * @param $ip String IP地址:112.65.102.16 * @return Array */ static public function getIpCity($ip) { $ip = preg_replace("/\s/","",preg_replace(&q
-
JS端基于download.js实现图片、视频时直接下载而不是打开预览
项目中的附件列表,通常情况都需要提供下载.删除的功能,功能本身没有什么要说的,都是基本功能,使用浏览器的的下载功能,也都是用window.open(url),或者window.location.href=url的方式,url即为附件下载接口,浏览器自动解析,如果是图片.视频.txt等格式的会直接预览文件,而不是像docx.xlsx一样直接下载,项目中为了功能明确,将预览单独加了一个查看按钮,下载按钮要实现无论什么文件格式都直接下载. 有两种方式处理: 一.后台接口层面处理:(比较常见) 响应头中
-
基于HTML+JS实现简单的年龄计算器
目录 前言 演示效果 HTML代码 CSS代码 Javascript代码 演示地址 前言 在线演示地址:http://haiyong.site/age-calculator JavaScript提供了一些内置的日期和时间函数,有助于从日期(出生日期)开始计算年龄.使用这些JavaScript方法,您可以轻松找到任何人的年龄.为此,我们需要用户输入日期和当前系统日期. 演示效果 HTML代码 <div class="container"> <div class=&quo
-
基于Java SSM实现在线点餐系统
目录 介绍 效果图 核心代码 介绍 项目编号:BS-PT-022 本项目基于SSM框架实现在线点餐系统,主要实现系统的在线点餐功能. 开发工具:IDEA/ECLIPSE 数据库:MYSQL5.7 后台技术:SSM 前台技术:CSS,JS,JSP 应用服务器:TOMCAT8.5 效果图 下面展示一下系统功能: 首页 我的餐车 订单 用户中心 会员登陆 会员注册 后台登陆 菜单管理 菜单类别管理 公告信息管理 订单管理 信息修改 核心代码 package com.example.meal_order