zoukankan      html  css  js  c++  java
  • 如何用JavaScript纯前端来实现下载脚本

    1、javascript脚本

    function downloadFile(data, fileName, type="text/plain") {
    // 创建不可见的元素
    const a = document.createElement("a");
    a.style.display = "none";
    document.body.appendChild(a);
    // 将href设置为要下载数据的blob表示形式
    a.href = window.URL.createObjectURL(
    new Blob([data], { type })
    );
    // 使用下载属性设置所需的文件名
    a.setAttribute("download", fileName);
    // 通过模拟点击触发下载
    a.click();
    // 清理
    window.URL.revokeObjectURL(a.href);
    document.body.removeChild(a);
    }

    2、html元素

    <form onsubmit="onFormSubmit(); return false;">
    <p>
    <label for="demo_filename">文件名称:</label><br>
    <input type="text" id="demo_filename">
    </p>
    <p>
    <label for="demo_content">内容:</label><br>
    <textarea id="demo_content"></textarea>
    </p>
    <button type="submit">下载</button>
    </form>
    如何用JavaScript纯前端来实现下载脚本,让后端人员失业去吧

     

    3、运行效果

    如何用JavaScript纯前端来实现下载脚本,让后端人员失业去吧

     

    是不是很简单,这样做的函数非常小,并且依赖于URL.createObjectUrl,函数注入<a>元素,将其设置为Blob值设置为目标文件的文本内容,并单击下载按钮以触发下载。元素在过程中保持隐藏状态,并在click()调用,一旦函数被调用,浏览器的下载提示就会显示出来,createObjectURL和Blob这两种技术才是真正的魔力!

  • 相关阅读:
    SQL分类
    简单poi读取excel
    Linux命令(2)-rm删除文件
    Linux下使用yum安装MariaDB
    linux下vi命令
    等价类划分法设计测试用例
    Linux命令(1)-创建文件
    职场面试必知:如何回答为何离开上一家公司
    软件测试的原则
    JAVA数组去除重复数据
  • 原文地址:https://www.cnblogs.com/wwwan/p/11157135.html
Copyright © 2011-2022 走看看