导入、导出、上传文件、导出pdf /excel

最新推荐文章于 2024-05-11 10:05:08 发布

得得得得得得得得得得得

最新推荐文章于 2024-05-11 10:05:08 发布

阅读量582

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_47298158/article/details/126894064

版权

一般为两种方式:

基于文件流,采用new formData方式,如element ui。
客户端把文件转化为BASE64

方式1:参照饿了么

  beforeUpload(file){
     //file为所传文件,一般处理type和大小即可
     let {type,size}=file
     if(!/(png|gif|jpg)/i.test(type)){
         this.$message('格式不正确 ')
         return false
     }
     if(size>200*1024*1024){
         this.$message('太大了')
         return false
     }
     return true
  }
会向action发请求，在network查看
默认格式：mutipart/form-data
数据格式：form-data(file文件流，filename:名字)

无action情况，时change事件传参,file，file下raw为文件对象
change(file){
    if(!file)return 
    file = file.raw
    let fileRead= new FileReader()
    fileRead.readAsDataURL(file)
    //readAsDataURL是异步，所以用onload
    fileRead.onload=ev=>{
        ev.target.result
    }
}
也可以将处理方法封装为方法
function fileParse(file,type="base64"){
  return new Promise(resolve=>{
    
    if(type==="base64"){
        fileRead.readAsDataURL(file)
    }else if(type==="buffer"){
        fileRead.readAsArraryBuffer(file)
    }
    fileRead.onload=ev=>{
        console.log(ev.target.result)//
        resolve(ev.target.result)
    }
  })
}
async change(file){
    let result = await fileParse(file,"base64")//得到base64文件
    res=await axios.post("url",qs.stringify({
        chunk:encodeURIComponet(result),
        filename:file.name
    }),
    {
        headers:{
            "Content-Type":"application/x-www-form-urlencoded"
        }
    }
}

const file = this.$refs.file.files[0]
//基于文章对象获取blob数据
const data = window.URL.createObjectURL(file)
//data便为数据

<file-draster accept="application/pdf" title="拖动到此处或双击上传" text="需要上传pdf格式" :display-list="false" 
:multi="false" 
style="height:100px"
@change="handleFileChange($event,'image1')"></file-draster>

handleFileChange(v, propName) {
    var fd = new FormData();
    fd.set('uploadfile', v);
    fd.set('savePath', 'depo/');
    uploadAllFileToImgServer(fd,'./').then((res) => {
      var data = res.data;
      if (data[0].state === '0') {
    this.editData[propName].push(data[0].path);
        this.$message({
          type: 'success',
          message: '上传成功'
        })
      } else {
        throw new Error('error');
      }
    }).catch(() => {
      this.$message({
        type: 'error',
        message: '上传失败'
      });
    });

},

对于大文件上传：采用切片上传，实习断点续传和文件秒传

arraybuffer转为正常格式

let blob =new Blob([res],{type:'application/文件格式'})
let reader=new FileReader()
reader.readAsText(blob,'utf-8')
reader.onload=function(){
   console.log(reader.result)
    that.list=JSON.parse(JSON.parse(JSON.stringify(reader.result))
}

导出

请求后端，后端返回表格文件流，前端处理下载
 // 导出  
    exporttable() {
      this.axios({
        method: "get",
        url: this.baseUrls + "api/pcadmin/hr/entry/export",
        responseType: "blob",
      })
        .then((response) => {
          const content = response.data;
          const blob = new Blob([content]);
          const time = this.timestampToTime(new Date().getTime() / 1000);
          const fileName = time + ".xlsx";
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
          // eslint-disable-next-line handle-callback-err
        })
        .catch((error) => {});
    },

下载vue-json-excel

import JsonExcel from 'vue-json-excel'
导出的数据
this.tableDataAllExp=JSON.parse(JSON.stringify(this.tableDataAll))
//将无需改为数据的值加空格防止自动转数字
this.tableDataAllExp.forEach((m,n)=>{
    if( m['fSpecificationsSignal']){              m['fSpecificationsSignal']=m['fSpecificationsSignal']+'&nbsp;'
       }
 })
 //处理头部
  this.columnHeaderExp={}
  this.columnHeader.map((item,i)=>{
        this.columnHeaderExp[item['key']]=item['value']
  })

html 部分

 <download-excel
    :data = "tableDataAllExp"
    :fields = "columnHeaderExp"
    type = "xls"
    header = "问卷调查结果"
    name = "分类报表"
     >
    <button type="primary">导出</button>
</download-excel>

下载包xlxs 
    // 导出
    FileSaver(){
      let xlsxParam = { raw: true }; //转换成excel时，使用原始的格式
      / generate workbook object from table /;
      /* 从表生成工作簿对象 */
      if(this.checkedNode == 0){
              let wb = XLSX.utils.table_to_book(
              document.querySelector("#projectTab"),//elementui 表格的id
              xlsxParam
            );
            /* 获取二进制字符串作为输出 */
            var wbout = XLSX.write(wb, {
              bookType: "xlsx",
              bookSST: true,
              type: "array"
            });
            try {
              FileSaver.saveAs(
                //Blob 对象表示一个不可变、原始数据的类文件对象。
                //Blob 表示的不一定是JavaScript原生格式的数据。
                //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
                //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
                new Blob([wbout], { type: "application/octet-stream" }),
                //设置导出文件名称
                "sheetjs.xlsx"
              );
            } catch (e) {
              if (typeof console !== "undefined") console.log(e, wbout);
            }
            return wbout;
      }else{
         let  wb = XLSX.utils.table_to_book(
              document.querySelector("#projectTab"),//elementui 表格的id
              xlsxParam
            )
         
          /* 获取二进制字符串作为输出 */
          var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
          });
          try {
            FileSaver.saveAs(
              //Blob 对象表示一个不可变、原始数据的类文件对象。
              //Blob 表示的不一定是JavaScript原生格式的数据。
              //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
              //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
              new Blob([wbout], { type: "application/octet-stream" }),
              //设置导出文件名称
              "sheetjs.xlsx"
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
          }
          return wbout;
      }
      
    }

导出方法

 //接口地址
	let _downUrl = url_global+ 'charts/export?f_id='+f_id;
     // 创建html的 a 标签
     let a = document.createElement("a");
     // 设置a标签的href属性
     a.href = _downUrl;
     // 点击
     a.click()

前端导出

  let  tableToExcel = function (){ 
   //要导出的json数据
   var jsonData = [
     {name:'路人甲',phone:'123456789',email:'000@123456.com'},
     {name:'炮灰乙',phone:'123456789',email:'000@123456.com'},
     {name:'土匪丙', phone:'123456789',email:'000@123456.com'},
     {name:'流氓丁',phone:'123456789',email:'000@123456.com'},
   ]
   //列标题，逗号隔开，每一个逗号就是隔开一个单元格
   var str = "姓名,电话,邮箱\n";
   //增加\t为了不让表格显示科学计数法或者其他格式
   for(var i = 0 ; i < jsonData.length ; i++ ){
     for(var item in jsonData[i]){
         str+=jsonData[i][item]+"\t,";     
     }
     str+='\n';
   }
   //encodeURIComponent解决中文乱码
   var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
   //通过创建a标签实现
   var link = document.createElement("a");
   link.href = uri;
   //对下载的文件命名
   link.download =  "同步日志.csv";
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
 }