基于 Nuxt.js实现在线Excel

Nuxt.js 是一个基于 Vue.js 的通用应用框架，一个用于Vue.js 开发SSR应用的一站式解决方案。它的优点是将原来几个配置文件要完成的内容，都整合在了一个nuxt.config.js，封装与扩展性完美的契合。

简单来说，nuxtjs项目就是一个vue的项目融合一个node.js server项目，这里node服务有两个作用，第一点是代替浏览器的工作,笼统理解就是在created时的请求数据和页面渲染，第二点是当作静态文件服务器，把渲染好的页面返回给用户。

要在 Nuxt.js中实现在线Excel，通过引入SpreadJS可以轻松实现这一点，这篇文章会分享如何通过SpreadJS在Nuxt.js中实现在线Excel

在将 SpreadJS 放入  Nuxt.js之前，我们必须首先创建一个  Nuxt.js项目。在本教程中，我们将使用 Nuxt.js提供的脚手架工具create-nuxt-app

使用npx create-nuxt-app <项目名>即可快速创建一个 Nuxt.js项目。创建过程中会有一些选项，创建完成后的项目文件结构如下

在创建成功后通过npm run build编译后，即可通过npm start运行。

接下来，我们在项目中引入spreadjs，

1.在package.json文件中添加spreadjs相关包

1. "@grapecity/spread-excelio": "15.2.1",
   
2.     "@grapecity/spread-sheets": "15.2.1",
   
3.     "@grapecity/spread-sheets-resources-zh": "15.2.1",
   
4.     "@grapecity/spread-sheets-vue": "15.2.1"

复制代码

2.在component文件夹中添加一个SpreadJS.vue文件

和我们在普通的vue项目中一样通过在template中添加gc-spread-sheets标签即可添加spreadjs 的工作簿，这里需要注意的一点是，由于Nuxt.js默认会把组件作为服务端组件来编译，所以这里需要给外层额外添加一个<client-only>标签来让nuxt编译时作为客户端组件编译，另外，我们也顺便加入了用于导入导出功能的按钮和文件输入框

1. <template>
   
2.   <div class="sample-tutorial">
   
3.     <button @click="exportexcel">导出excel</button>
   
4.     <input type="file" id="fileDemo" class="input" @change="changeFileDemo">
   
5.     <input type="button" id="loadExcel" value="import" class="button" @click="loadExcel">
   
6. 
   
7. <client-only placeholder="loading...">
   
8.     <gc-spread-sheets :hostClass="hostClass" @workbookInitialized="initwb">
   
9.       <gc-worksheet>
   
10.       </gc-worksheet>
    
11.       <gc-worksheet> </gc-worksheet>
    
12.     </gc-spread-sheets>
    
13.   </client-only>
    
14.   </div>
    
15. </template>

复制代码

3.导入spreadjs相关组件
在普通的vue项目中，我们只需要通过import所需的 spreadjs包即可，但是在Nuxt.js中，如果直接import到我们刚刚创建的vue文件中，会提示"d[color=var(--color-fg-default)  !important]ocument is not defined"错误，原因和上面提到的类似。解决办法是。新建一个js文件。在其中import相关的包。然后在配置文件nuxt.config.js中，将其做为plugins引入，ssr设置为false,这样就可以避免上述问题。我们新建了一个spreadjs.js文件，写入了下面的内容

1. import "@grapecity/spread-sheets-vue";

复制代码

最后是vue文件中的script部分，可以看到只有css是通过import 引入的，这个不会受到影响
对导入导出功能需要使用的spread-excelio包，我们通过require方法，在加载时再动态导入，避免了编译时提到的上述问题。

1. <script >
   
2.    
   
3. import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
   
4. 
   
5. var ExcelIO={};
   
6. export default {
   
7.   name: "SpreadJS",
   
8.   data() {
   
9.     return {
   
10.       hostClass: "spread-host",
    
11.       autoGenerateColumns: true,
    
12.       width: 300,
    
13.       visible: true,
    
14.       resizable: true,
    
15.       formatter: "$ #.00",
    
16.     };
    
17.   },
    
18.   computed: {
    
19.     dataTable() {
    
20.       let dataTable = [];
    
21.       for (let i = 0; i < 42; i++) {
    
22.         dataTable.push(i + 0.56);
    
23.       }
    
24.       return dataTable;
    
25.     },
    
26.   },
    
27.   methods: {
    
28.     initwb: function (spread) {
    
29.       this.spread = spread;
    
30.       spread.getSheet(0).setArray(0, 0, this.dataTable);
    
31.       spread.getSheet(1).visible(false);
    
32.     },
    
33.     exportexcel: function () {
    
34.       let spread = this.spread;
    
35.       let excelIo = new ExcelIO.IO();
    
36. 
    
37.       let fileName = "test.xlsx";
    
38.       let password = this.password;
    
39.       if (fileName.substr(-5, 5) !== ".xlsx") {
    
40.         fileName += ".xlsx";
    
41.       }
    
42. 
    
43.       let json = spread.toJSON();
    
44. 
    
45.       // here is excel IO API
    
46.       excelIo.save(
    
47.         json,
    
48.         function (blob) {
    
49.           let url = window.URL.createObjectURL(blob);
    
50.           let link = document.createElement("a");
    
51.           link.style.display = "none";
    
52.           link.href = url;
    
53.           link.setAttribute("download", fileName);
    
54.           document.body.appendChild(link);
    
55.           link.click();
    
56.           document.body.removeChild(link); // 下载完成移除元素
    
57.           window.URL.revokeObjectURL(url);
    
58.           //saveAs(blob, fileName);
    
59.         },
    
60.         function (e) {
    
61.           // process error
    
62.           console.log(e);
    
63.         },
    
64.         {
    
65.           password: password,
    
66.         }
    
67.       );
    
68.     },
    
69.     changeFileDemo(e) {
    
70.             this.importExcelFile = e.target.files[0];
    
71.         },
    
72.     loadExcel(e) {
    
73.             let spread = this.spread;
    
74.             let excelIo = new ExcelIO.IO();
    
75.             let excelFile = this.importExcelFile;
    
76.             
    
77.             // here is excel IO API
    
78.             excelIo.open(excelFile, function (json) {
    
79.                 let workbookObj = json;
    
80.                 spread.fromJSON(workbookObj);
    
81.                
    
82.             }, function (e) {
    
83.                 // process error
    
84.                 alert(e.errorMessage);
    
85.             });
    
86.         }
    
87.   },
    
88.   mounted:function(){
    
89.     ExcelIO=require("@grapecity/spread-excelio");
    
90.   }
    
91. };
    
92. </script>

复制代码

最终运行效果



最后附上demo
spreadjsWithNuxt.zip (2.07 MB, 下载次数: 203)

2022-12-30 18:09 上传

点击文件名下载附件