Vue+element ui 实现文件的导入与导出，图片导出

html代码：

 
  导入文件
 



 导出文件


 导出图片

js代码：

//导入文件
videoWatchHandleChange(files, fileList) {
  // console.log(fileList, "fileList");
  let formData = new FormData();
  formData.append("file", fileList[fileList.length - 1].raw);
  importtable(formData).then((res) => {
     this.$message.success("导入成功");
     this.getrighttablepage();
  });
},
//导出文件
exporttable() {
  exporttable(this.id).then(res => {
    // res就是接口返回的文件流了
    //下载excel文件
    let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
    // let blob = new Blob([res.data], {type: "application/msword"}); //下载word文件
    let objectUrl = URL.createObjectURL(blob);
    window.location.href = objectUrl;
    this.$message.success("导出成功");
  })
},
//导出图片
outputPicture() {
   outputPictureList(this.id).then(res => {
      // res就是接口返回的文件流了
      const blob = new Blob([res.data]);
      const fileName = "report.jpg";
      if ("download" in document.createElement("a")) {
            // 非IE下载
            const dlink = document.createElement("a");
            dlink.download = fileName;
            dlink.style.display = "none";
            dlink.href = URL.createObjectURL(blob);
            document.body.appendChild(dlink);
            dlink.click();
            URL.revokeObjectURL(dlink.href); // 释放URL 对象
            document.body.removeChild(dlink);
       } else {
          // IE10+下载
            navigator.msSaveBlob(blob, fileName);
       }
  })
},

接口对应的js代码：

//导入表格
export function importtable(data,params) {
  return request({
    url: '/admin/pmsproduct/excelInput',
    method: 'post',
    headers: {
      "Content-Type": "multipart/form-data;charset=utf-8"
    },
    data,params
  })
}
//导出表格
export function exporttable(params) {
  return request({
    url: '/admin/pmsproduct/excelOutput',
    method: 'get',
    responseType: 'blob',
    params
  })
}
//导出图片
export function outputPictureList(id) {
  return request({
    url: '/admin/clxsjl/expPic/'+id,
    method: 'post',
    responseType: 'blob',
  })
}

字段 responseType: 'blob'  一定要有，不然会出现excel表格打不开的情况：