zoukankan      html  css  js  c++  java
  • 前端通过浏览器导出文件并下载

    将文本或者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)
      }
    }
  • 相关阅读:
    jquery中子元素和后代元素的区别
    MVC4 创建控制器时,无法检索元数据
    ref和out的用法说明举例(转)
    DataView的ToTable方法,类似数据库Distinct。
    oracle 19C 静默安装(单机版)
    Supervisord进程管家
    zabbix v3.0安装部署【转】
    Linux下Hadoop2.7.3集群环境的搭建
    Redis集群搭建与简单使用【转】
    redis+keepalived实现高可用
  • 原文地址:https://www.cnblogs.com/brainworld/p/8438155.html
Copyright © 2011-2022 走看看