vue中，导入、导出功能总结

1. 导入功能

• 使用form表单的形式解决导入功能

<input type="file" ref="myfile" id="file" accept=".xlsx,.xls" />

postOprate()是已经封装好的一个post请求方法，postOprate(url, formData)，url是请求的接口。

这里使用了antDesign

handleImport() {
    let myfile = this.$refs.myfile
    let files = myfile.files
    if (files.length) {
        let file = files[0]
        let formData = new FormData()
        formData.append("file", file)
        postOprate(url, formData).then(res => {
            if (res.code === 200) {
                this.$message.success('上传成功')
                // 清空上传的文件
                const file = document.getElementById('file')
                file.value = ''
            }
        })
    } else {
        this.$message.error('还未选择上传的文件！')
    }
},

2. 导出功能

• 使用a标签导出，仅支持get请求。

let downloadElement = document.createElement("a");
downloadElement.href = hrefOrigin
downloadElement.click(); //点击下载

• 使用form表单导出

let url = 请求的接口+传的参数
var temp = document.createElement('form')
temp.method = 'post'
temp.action = url
temp.target = '_blank'
var input = document.createElement('input')
input.type = 'hidden'
input.value = ''
temp.appendChild(input)
document.body.appendChild(temp)
temp.submit()
document.body.removeChild(temp)

• 使用fetch导出，当不支持以form表单的形式下载，而需要Content-Type为application/json或其他形式的可以用fetch导出。body是要传的参数。 a.download = filename;给下载的文件命名

fetch(url, {
  method: 'post',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(this.selectedRowKeys)
}).then(res => res.blob().then(blob => {
    const time = new Date()
    const y = time.getFullYear() 
    const m = time.getMonth() > 10 ? time.getMonth()+1 : '0'+(time.getMonth()+1) 
    const d = time.getDate() > 10 ? time.getDate() : '0'+time.getDate()
    const times = String(y) + String(m) + String(d)
    var filename=`${times}.xlsx`
    var a = document.createElement('a');
    var url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = filename;
    a.click();
    window.URL.revokeObjectURL(url);
    this.selectedRowKeys = []
}))