Export excel in the table in vue

Vue development for beginners to learn, trying to front-end project to export Excel spreadsheet, check the number of posts, stepped on a lot of the pit, come to share with you some experience.

1. Installation depends

   1 //npm 
   2 npm install file-saver -S 
   3 npm install xlsx -S
   4 npm install -D script-loader

2. Import two JS files

   Blob.js and Export2Excel.js new vendor in the src directory folder (the file name is best not to change, otherwise you will have endless trouble, except Great God!) , Which put Blob.js and Export2Excel.js two JS file. Catalog something like this:

   

   By Case

3.  The introduction of two packets main.js

   import Blob from './vendor/Blob'
   import Export2Excel from './vendor/Export2Excel.js'

4. Modify Export2Excel.js

   Hard to say, on the map:

   

   The main changes to the location of the path your own file

5. Write two methods that you want to export files in this page vue

   export2Excel () { 
             require.ensure ([], () => { 
               const} {export_json_to_excel = the require ( './ Vendor / Export2Excel' );
                // head 
               const tHeader = [ 'time', 'address', 'name' ];
                // tag corresponding 
               const filterVal = [ 'DATE', 'address', 'name' ];
                // tag is a content corresponding to the array of structures             
               const = List the this .tableData;
                // a dry method I do not know Well the 
               const Data = the this .formatJson (filterVal, List); 
               export_json_to_excel (tHeader, Data,'List excel');
             })
           },
   formatJson(filterVal, jsonData){
       return jsonData.map(v => filterVal.map(j => v[j]))
   },                        

   A button to trigger expert2Excel () function on ok

6. Remark

    The first writing may not understand, integrate a link to a tell a good example, to share:

   https://www.cnblogs.com/myfirstboke/p/8243800.html

   https://www.jb51.net/article/129695.htm

   https://www.jianshu.com/p/3f78590ba194

   https://www.jb51.net/article/149084.htm