Import and export Excel to achieve under the framework of Vue, Export PDF

Project requirements: develop a project archives management system based on Vue framework for fill, edit and archive project data, the research needs to support the following functions:

• Import Excel reports, export
• Export PDF file
• Print Form

 

After technology selection, project team unanimously decided to table the components is achieved by SpreadJS. The following is the realization of import and export Excel reports, PDF export, print form some ideas for your reference:

Environment Introduction

1. Background: Spring Boot 2.x

2. Reception: vue, vue-element, webpack, iview, Vuex.js 2.x

3. Component: SpreadJS V11

SpreadJS assembly Download: https://www.grapecity.com.cn/download/?pid=57

Vue project initialization

Here, you can refer to this technology blog:  three minutes of Vue project created SpreadJS

Project operating results:

Here is a local Excel file:

 

 

 

By SpreadJS, project into effect:

 

 

 

Application of my project a SpreadJS V12.2.5 version (the latest version is the official network SpreadJS V13), which package.json need to add a reference to the following:

"dependencies": {
    "@grapecity/spread-excelio": "12.2.5",
    "@grapecity/spread-sheets": "12.2.5",
    "@grapecity/spread-sheets-pdf": "^12.2.5",
    "@grapecity/spread-sheets-print": "12.2.5",
    "@grapecity/spread-sheets-resources-zh": "12.2.5",
    "@grapecity/spread-sheets-vue": "12.2.5",
    "@grapecity/spread-sheets-charts": "12.2.5" ,
    "file-saver": "2.0.2",
    "jquery": "2.2.1",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
   },

　　

 

Implementation of npm install command to install the assembly SpreadJS

You can refer to this technology blog: https://www.grapecity.com.cn/blogs/spread-sheets-v11sp1-support-npm

 

Import and export Excel reports

1. Installation Related Resources package: "@ grapecity / spread-excelio", "file-saver"
2. Introducing the page: import ExcelIO from '@ grapecity / spread-excelio', import FaverSaver from 'file-saver'
3. The following code may be implemented import and export Excel:

exportXlsx () {
      let ex = new ExcelIO.IO()
      let json = this.spread.toJSON()
      ex.save(json, function (blob) {
        FaverSaver.saveAs(blob, 'export.xlsx')
      }, function (e) {
        console.log(e)
      })
    },
     importXlsx(){
        let self = this;
         var excelIO = new ExcelIO.IO();
         console.log(excelIO);
         const excelFile = document.getElementById("fileDemo").files[0];
       excelIO.open(excelFile, function (json) {
           let workbookObj = json;
           self.spread.fromJSON(workbookObj);
         }, function (e) {
             alert(e.errorMessage);
        });
     }

　　

Export Notes in PDF

1. Install the same version of the PDF package: "@ grapecity / spread-sheets-pdf"
2. In the page to be printed is introduced into the package: import "@ grapecity / spread-sheets-pdf";
3. Note introduced into the pack order of introduction, first introduced @ grapecity / spread-sheets and grapecity / spread-sheets-print
4. Need to introduce third-party plug-in file-saver: import FaverSaver from 'file-saver'
5. The following few lines of code can be realized PDF export function

   savePdf(){
         let self = this;
        let jsonString = JSON.stringify(self.spread.toJSON());
        let printSpread = new GC.Spread.Sheets.Workbook();
        printSpread.fromJSON(JSON.parse(jsonString));
        printSpread.savePDF(function(blob) {   
                // window.open(URL.createObjectURL(blob))        
                FaverSaver.saveAs(blob,  'Hello.pdf')
                }, function(error) {
                 console.log(error);
                }, {
                title: 'Print',
            });  
     }

　　

Sample code download

You can download the sample code below, to achieve export PDF, Excel import and export functions. 

SpreadJSVue.zip