vue2,vue3导入导出插件js-xlsx（表格）,后台导入导出

前端导出

vue2引入文件方式：2种方式皆可

var XLSX = require("xlsx");
import XLSX from 'xlsx';

vue3引入方式：引入方式不对会报错

import * as XLSX from 'xlsx';

方法使用时一样的

var XLSX = require("xlsx");

var arr = [
            ['name', 'sex', 'ages'],
            ['Dawei', '男', 20],
            ['Limei', '女', 21]
          ];

//var arr=[{name:'Dawei',sex:'男',ages:'20'},{name:'Limei',sex:'女',ages:'21'}]
//var worksheet = XLSX.utils.json_to_sheet(arr);
var worksheet = XLSX.utils.aoa_to_sheet(arr);
let workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook,worksheet,'第一页')
XLSX.writeFile(workbook,'人物属性.xlsx')

安装：npm install xlsx --save

名称	说明	参数
read	解析函数	(data, read_opts)
readFile	读取文件	(filename, read_opts)
write	编写函数	(wb, write_opts)
writeFile	写入工作簿	（workbook，wopts）例：wopts = { bookType:'xlsx', bookSST:false, type:'binary' }
utils	实例方法	例：utils.sheet_to_csv，具体查看官方文档

通过接口后台导出

postExcle:(res)=>{//后台下载xlsx
    const url = window.URL.createObjectURL(new Blob([res.data]))
    var filename = res.headers//下载后文件名
        filename = filename["content-disposition"]
        filename = filename.split(";")[1].split("filename=")[1];
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.download = `${decodeURI(filename)}`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
}

注：调用的时候直接把接口返回值放进去就好了，有的后台返回的文件流不是data包起来的对象，这个时候就直接使用res就好了。

后台导入

<el-upload
    ref="upload"
    :auto-upload="false"
    :show-file-list="false"
    action=""
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
    :http-request="httpRequest"
    :on-change="handleChange">
     <el-input v-model="uploadText" size="small" readonly>
         <template slot="append">浏览</template>
      </el-input>
</el-upload>

action：上传的地址
accept：上传的格式，这个地方我是设置的上传表格限制
auto-upload：是否自动上传，因这里是手动上传，所以设置为false
http-request：自定义上传的方法，会覆盖默认的上传行为（即action="url"）
on-change：上传文件状态（添加，上传成功或失败）改变时触发的方法

httpRequest(data){//上传文件
   const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加
   formData.append('file', data.file) //添加文件对象
   this.$api.postOKcardImport(formData).then(res=>{
     if(res.code==0){
        this.$message.success(res.message)
     }else{
        this.$message.error(res.data)
     }
   })
},

postOKcardImport(params){
      return instance.post(`/ok/import`,params,{headers: {'application': 'multipart/form-data'}})
}

注意：FormData对象，添加参数只能通过append('key', value)的形式添加

请求头需要更改成headers: {'application': 'multipart/form-data'}这个格式

vue2,vue3导入导出插件js-xlsx（表格）,后台导入导出

前端导出

通过接口后台导出

后台导入

猜你喜欢