【element 】使用xlsx、FileSaver实现导出，CDN引入，FileSaver.saveAs is not a function.saveAs is not a function-Toy模板网

这篇具有很好参考价值的文章主要介绍了【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);
}

好了，相信这个世界依旧美好！文章来源地址https://www.toymoban.com/news/detail-541681.html

到了这里，关于【element 】使用xlsx、FileSaver实现导出，CDN引入，FileSaver.saveAs is not a function.saveAs is not a function的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！