前端 导出、导出 excel文件 方法

前端完成 导入上传excel文件（兼容传参）

<!-- 导入对话框 -->
<el-dialog :visible.sync="isVisible" title="选择excel文件" width="30%" @close="changeVisible(false)">
    <el-upload
        ref="upload"
        :multiple="false"
        list-type="text"
        :file-list="fileList"
        :show-file-list="true"
        :auto-upload="false"
        <!-- 这个必须设置成false，否则文件选择后就会自动上传，而无法继续传额外参数 -->
        class="editor-slide-upload"
        :on-success="handleSuccess"
        :action="uploadUrl"
        :limit="1"
        accept=".xlsx"
      >
        <el-button size="small" type="primary">上传文件</el-button>
   </el-upload>
   <el-date-picker v-model="uploadDate" type="month" placeholder="选择时间" value-format="yyyy-M" />
   <span slot="footer" class="dialog-footer">
        <el-button @click="changeVisible(false)">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
   </span>
</el-dialog>
<script>
handleSubmit() {
     if (this.$refs.upload.$children[0].fileList.length && this.uploadDate !== ‘‘) {
	 //时间、文件都不为空，可以上传
        this.$refs.upload.submit()
	//手动上传通过上面这种方式
      } else {
        this.$message.warning(‘缺乏文件或时间‘)
      }
}
</script>

方式1：后端来完成excel文件，给前端一个接口

export2excel() {
     callInterface(/*调用导出接口*/).then(res => {
        var blob = new Blob([res.data], { type: ‘application/vnd.ms-excel‘ }); // type这里表示xls类型
        var downloadElement = document.createElement(‘a‘); // 产生下载连接
        const objectUrl = URL.createObjectURL(blob); // 创建一个临时url
        downloadElement.href = objectUrl; // 挂载
        console.log(decodeURI(res.headers[‘content-disposition‘]))
        downloadElement.download = decodeURI(res.headers[‘content-disposition‘].split(‘;‘)[1].split(‘=‘)[1].split("‘‘")[1]) // 获取文件名
        downloadElement.click(); // 点击下载
      })

做法1：将一个表格(如el-form)导出为excel

前端 导出、导出 excel文件 方法

原文：https://www.cnblogs.com/lhx9527/p/14634912.html