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


    将文本或者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)
      }
    }
  • 相关阅读:
    day02 基本数据类型与运算符
    java的基本数据类型--四类八种
    mysql 语句
    5 函数
    4 流程控制
    2 字符串操作 日期
    在Win7虚拟机下搭建Hadoop2.6.0+Spark1.4.0单机环境
    如何排查java.lang.NoSuchMethodError错误
    搭建Hadoop2.6.0+Eclipse开发调试环境
    在Win7虚拟机下搭建Hadoop2.6.0伪分布式环境
  • 原文地址:https://www.cnblogs.com/brainworld/p/8438155.html
Copyright © 2020-2023  润新知