Bootstrap

【element 】使用xlsx、FileSaver实现导出,CDN引入,FileSaver.saveAs is not a function.saveAs is not a function

系统前端采用element ui,现在需要实现一个导出的功能,各种搜索找到XLsx、FileSaver.

CDN方式引入:(网上基本很少CDN引入)


    <script src="//cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    
    <script src="//cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.js"></script>
    

以上文件在人口文件中已经全局引入

网上发部分代码如下:


<div id="app">
	// 导出
	<el-button class="button-down" icon="el-icon-download" @click="exportExcel()" style="float: right">导出</el-button>
	
	// Table
	 <template>
	 	<el-table
	 	  fix
          id="tableId"
          :data="tab_data"
          max-height="370"
          style="width: 100%; margin-top: 20px"
          :default-sort = "{prop: 'statistical_date', order: 'descending'}" 
          :cell-style="rowStyle">
                    
			<el-table-column
	            header-align="center"
		        v-for="(head,index) in tableHeader"
	            :key="index"
	            :label="head.label"
	            :prop="head.key">
	            <template slot-scope="scope">
	               <span>{{scope.row[head.key]}}</span>
	           	</template>
	        </el-table-column>
        </el-table>
    </template>
</div>


	
<script>
	var Main = {
        data() {
            return {
				···
			}
		},
		methods: {
			exportExcel(){
                //转换成excel时,使用原始的格式
                var xlsxParam = { raw: true };
                let fix = document.querySelector(".el-table__fixed");
                let wb;
                
                //判断有无fixed定位,如果有的话去掉,后面再加上,不然数据会重复
                if (fix) {
                    wb = XLSX.utils.table_to_book(document.querySelector("#tableId").removeChild(fix),xlsxParam);
                    document.querySelector("#tableId").appendChild(fix);
                } else {
                    wb = XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam);
                }
                
                var wbout = XLSX.write(wb, {bookType: "xlsx", bookSST: true, type: "array"});

                try {
                    FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), "关卡付费分布.xlsx"); //文件名
                } catch (e) {
                    if (typeof console !== "undefined") console.log(e, wbout);
                }
                return wbout;
            }
		}
    };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
<script>

一切看起来都很完美!!!!!!!

但是执行导出的时候,报错:
FileSaver.saveAs is not a function.saveAs is not a function

难过吧?百度搜,查!发现都没有点头绪

哈哈哈,其实原因就在于全局引用!!!!!!
上边代码中,使用的是

FileSaver.saveAs

找到它,把它改成
window.saveAs

也就是:

 try {
	window.saveAs(new Blob([wbout], { type: "application/octet-stream" }), "关卡付费分布.xlsx"); //文件名
} catch (e) {
	if (typeof console !== "undefined") console.log(e, wbout);
}

好了,相信这个世界依旧美好!

;