前端通过浏览器导出文件并下载

将文本或者JS字符串信息借助Blob转换成二进制,作为<a>元素的href属性,配合download属性,实现下载

let downloadFile=(fileStr:string,name:string)=>{

  if ("download" in document.createElement("a")) {
    let eleLink = document.createElement("a");
    eleLink.download = name;
    eleLink.style.display = "none";
    let blob = new Blob([fileStr])
    eleLink.href = URL.createObjectURL(blob)

    //兼容firefox,元素添加到页面才能触发点击
    document.body.appendChild(eleLink)
    eleLink.click()
    document.body.removeChild(eleLink)
  }
}

对于非文本文件使用base64转换

let downloadFile=(domImage,name:string)=>{

  if ("download" in document.createElement("a")) {
    let eleLink = document.createElement("a");
    eleLink.download = name;
    eleLink.style.display = "none";
 
    //图片转64
    let canvas=document.ceateElement("canvas");
    let context=canvas.getContext("2d");
    let width=domImage.natureWidth,
     height=domImage.natureHeight;
    context.drawImage(domImg,0,0);
 
    //如果是png,则context.toDataURL("image/png");
    eleLink.href=context.toDataURL("image/jpeg");

    //兼容firefox,元素添加到页面才能触发点击
    document.body.appendChild(eleLink)
    eleLink.click()
    document.body.removeChild(eleLink)
  }
}
原文地址:https://www.cnblogs.com/brainworld/p/8438155.html