Vue+XLSX实现excel的上传和下载

github 地址:https://github.com/sheetjs/sheetjs

官方demo

上传:

xlsx提供多种上传格式:

• XLSX.utils.sheet_to_csv：生成CSV格式
• XLSX.utils.sheet_to_txt：生成纯文本格式
• XLSX.utils.sheet_to_html：生成HTML格式
• XLSX.utils.sheet_to_json：输出JSON格式

准备测试数据

 完整代码

<div id="app" style="margin-left: 40%;margin-top: 10%;">

    <input type="file" v-on:change="onchange"/>
    <div id="out-table"></div>
</div>

<script src="vue.min.js"></script>
<!--<script src="SheetJS-vue.js"></script>-->
<script src="xlsx.core.min.js"></script>
<script >

    var vue =new Vue({
        el:"#app",
        data:{
           resJosn:''
        },
        methods:{
            onchange: function (evt) {
                var file;
                var files = evt.target.files;

                if (!files || files.length == 0) return;

                file = files[0];

                var reader = new FileReader();
                reader.onload = function (e) {
                    // pre-process data
                    var binary = "";
                    var bytes = new Uint8Array(e.target.result);
                    var length = bytes.byteLength;
                    for (var i = 0; i < length; i++) {
                        binary += String.fromCharCode(bytes[i]);
                    }

                    /* read workbook */
                    var wb = XLSX.read(binary, { type: 'binary' });

                    /* grab first sheet */
                    var wsname = wb.SheetNames[0];
                    var ws = wb.Sheets[wsname];

                    /* generate HTML */
                    var HTML = XLSX.utils.sheet_to_html(ws);
                    this.resJosn = XLSX.utils.sheet_to_json(ws);
                    console.log(this.resJosn)
                    /* update table */
                    document.getElementById('out-table').innerHTML = HTML ;
                    /* show export button */
                  /*  document.getElementById('export-table').style.visibility = "visible";*/
                };

                reader.readAsArrayBuffer(file);
            },
        
        },
    })

</script>

结果

下载:

xlsx.js提供多种导入格式,table,json等等

完整代码

<div id="app" style="margin-left: 40%;margin-top: 10%;">
    
<input type="button" @click="download" value="download"/>
<table id="table" ref="tb">
            <thead>
                <tr>
                    <td>test1</td>
                    <td>test2</td>
                </tr>
            </thead>
    
            <tbody v-for="(item,index) in table" :key="index">
                <tr>
                    <td>{{item.test1}}</td>
                    <td>{{item.Test2}}</td>
                </tr>
            </tbody>
        </table>
</div>
<script src="vue.min.js"></script>
<!--<script src="SheetJS-vue.js"></script>-->
<script src="xlsx.full.min.js"></script>
<script src="SheetJS-vue.js"></script>
<script >
//  Vue.component('my-component', {
//   template: '<div>A custom component!</div>'
// })


    var vue =new Vue({
        el:"#app",
        data: {
            //准备数据
            table: [{ 'test1': '21', 'Test2': '2121' }, { 'test1': '21', 'Test2': '2121' }, { 'test1': '21', 'Test2': '2121' }]
        },
        methods:{
            download() {
                //var wb = XLSX.utils.table_to_book(this.$refs.tb); //table to excel

                var ws = XLSX.utils.json_to_sheet(this.table); //json to excel
                var wb = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(wb, ws, "DataSource");

                XLSX.writeFile(wb, "excelName.xlsx");
            }
        },
 
    })



</script>

结果