一键导入导出

时差晨曦
132 阅读2分钟

a标签

在实现导入导出功能前，我们首先来了解一下a标签。部分人对于a标签的了解就是它就是一个超文本链接，但是它还有一个功能就是将它所引用的文件下载下来。 a标签中链接是以.xlsx/.docx/.doc结尾的文件，点击链接之后会将这个文件下载下来，其中a标签内部中的download属性可以用来指定文件名；以.html/.txt结尾的文件以及图片，点击链接之后会打开文件内容并不会下载下来。

一键导出

  • 第一步获取导出的数据
  • 第二步将数据转为不可变、原始数据的类文件对象Blob

let blob = new Blob(data);

  • 第三步创建一个url指向这个文件

let url = window.URL.createObjectURL(blob)

  • 第四步借助a标签将文件下载下来
function download(url,filename){
      if (!url) return;
      let link = document.createElement("a"); //创建a标签
      link.style.display = "none";
      link.href = url; //文件下载地址
      link.setAttribute("download", filename); //设置下载属性 以及文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
   }

一键导入

function upload(){
    let input=document.createElement("input");
    input.setAttribute('type','file');
    input.setAttribute('accept','*');
    input.style.display="none";
    input.addEventListener('change',()=>{
        if(input.files&&input.files.length>0){
            // 调用上传文件接口上传文件
        }
    })
    document.body.appendChild(input);
    input.click();
    document.body.removeChild(input);
}

补充

Blob

Blob定义

Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。 Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

生成Blob

要从其他非blob对象和数据构造一个 Blob，需要使用 Blob() 构造函数。 Blob() 构造函数返回一个新的 Blob 对象。 blob的内容由参数数组中给出的值的串联组成。

var blob = new Blob( array, options );
  • array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。
  • options 是一个可选的BlobPropertyBag字典，它会指定如下两个属性： type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。 endings，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： "native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，默认值，代表会保持blob中保存的结束符不变
avatar
文章
阅读
粉丝