3 分钟如何实现快速构建一个 SpreadJS Vue 工程

最新推荐文章于 2024-07-02 02:49:46 发布

不如温暖过生活

最新推荐文章于 2024-07-02 02:49:46 发布

阅读量630

点赞数

文章标签： vue excel

原文链接：http://grapecity.com.cn

版权

SpreadJS是一款基于 HTML5 的纯前端表格控件，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性可为用户带来亲切、易用的使用体验，并满足 Web Excel组件开发、表格文档协同编辑、数据填报、类Excel报表设计等业务场景，可极大降低企业研发成本和项目交付风险。赶快点击下载SpreadJS立即体验吧>>

SpreadJS 纯前端表格控件 V11.2（SP2）版本已经全面支持了 Vue 拓展，下面我们看下如何配合 VUE CLI，只需 3 分钟快速构建一个 SpreadJS Vue 工程。

Vue

1. 安装vue-cli（耗时30 S）

通过命令:npm install -g \@vue/cli 安装（https://cli.vuejs.org/）

2. 创建 vue-spreadjs 工程（耗时 1 Min）

请根据项目需求配置工程选项：

3. 通过npm install 或者在package.json中添加引用的方式安装spread.sheets（耗时20S）

    "@grapecity/spread-excelio": "^11.2.3",    
  "@grapecity/spread-sheets": "^11.2.3",    
  "@grapecity/spread-sheets-print": "^11.2.3",   
   "@grapecity/spread-sheets-resources-zh": "^11.2.3",   
   "@grapecity/spread-sheets-vue": "^11.2.3",

4. 修改 router/index.js 为 spreadJS 页面添加 router（耗时 30 S）

routes: [      {        path: '/',       
 name: 'HelloWorld',   
     component: HelloWorld      },   
   {        path: '/spreadjs',      
  name: 'spreadJS',     
   component: SpreadJS      }    ]

5. 新建 SpreadJS Component（耗时 30 S）

请在 components 下添加 SpreadJS.vue 文件

template 内容：

<template>  <div>   
   <h1>Spread.Sheets</h1>   
   <div>       
  <input type='file' @change="processFile($event)"/>         
<button @click="importExcel">导入</button>          
<button @click="exportExcel">导出</button>          
<button @click="printWorkbook">打印</button>     
 </div>    
  <div style="text-align: left">         
 <gc-spread-sheets  hostClass='spread-host'  @workbookInitialized = 'workbookInitialized($event)'>           
   <gc-worksheet>              
</gc-worksheet>          
</gc-spread-sheets>     
 </div>
  </div> 
 </template>

Style内容：

<style>  .spread-host { 
   width: 100%;  
  height: 400px;  
  border: 1px solid black;  }  
</style>

Script内容：

<script>  /* eslint-disable */   
 import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";  
import GC from "@grapecity/spread-sheets"; 
 import "@grapecity/spread-sheets-vue"; 
 import "@grapecity/spread-sheets-resources-zh";  
import ExcelIO from "@grapecity/spread-excelio";  
import FaverSaver from "file-saver"; 
 import "@grapecity/spread-sheets-print";   
 GC.Spread.Common.CultureManager.culture("zh-cn");  
 GC.Spread.Sheets.LicenseKey = ExcelIO.LicenseKey = "your key"  export default { 
   methods: 
{      processFile (event) 
{        this.excelFile = event.target.files[0];  
    },      importExcel ()
 {        var excelIO = new ExcelIO.IO();      
  console.log(excelIO);       
 var self = this;      
  excelIO.open(this.excelFile, function(json) {        
  self.spread.fromJSON(json);          
console.log(json);        
});    
  },      
exportExcel () {       
 var excelIO = new ExcelIO.IO();      
  var json = this.spread.toJSON();        
excelIO.save(          json,          function(blob)
 {            FaverSaver.saveAs(blob, "export.xlsx");          },     
     function(e) {            console.log(e);          }      
  );    
  },      printWorkbook (){      
  this.spread.print();     
 },    
  workbookInitialized(spread) {        
this.spread = spread;        spread.refresh();   
   }   
 } 
 } 
 </script>

workbookInitialized 是 spread 初始化完成后的回调事件，我们可以在事件中得到初始化好的 workbook 对象。

部署授权需要同时给 Sheets 和 ExcelIO 同时添加，部署授权可以在全局 config 中配置。

6. 运行项目（耗时 10 S）

创建 npm install 依赖后，即可通过npm start启动项目

浏览器访问 http://localhost:8081/#/spreadjs 查看效果。

只需 3 分钟，一个 SpreadJS 的 Vue 项目就创建完成了，当然纯前端表格控件 SpreadJS 的强大不仅于此，去实际试用感受一下吧

通过本篇文章有没有被SpreadJS这些功能惊艳到！赶快下载体验吧！