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)
      }
    }
  • 相关阅读:
    读书笔记——数据结构(1)开篇吐槽
    问题解决——产生未引用参数的警告
    移植对话框资源
    问题解决——XP线程池找不到QueueUserWorkItem
    SD 笔记01
    css3 笔记 背景
    Css3 笔记 动画 和定位属性
    小程序笔记
    C# E店宝格格家接口对接
    JS:onmouseover 、onmouseout
  • 原文地址:https://www.cnblogs.com/brainworld/p/8438155.html
Copyright © 2011-2022 走看看