前端js 實現文件下載

来源:https://www.cnblogs.com/Byme/archive/2018/07/13/9305571.html
-Advertisement-
Play Games

https://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/ 侵刪 1.H5 download屬性 downFile(下載地址, 保存名稱); 2.iframe方式 3.form方式 ...


https://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/ 侵刪

 

1.H5 download屬性

function downFile(content, filename) {
    // 創建隱藏的可下載鏈接
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 字元內容轉變成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);
    // 觸發點擊
    document.body.appendChild(eleLink);
    eleLink.click();
    // 然後移除
    document.body.removeChild(eleLink);
};

downFile(下載地址, 保存名稱);

 

2.iframe方式

// if (typeof(download.iframe) == 'undefined') {
            //     var iframe = document.createElement('iframe');
            //     download.iframe = iframe;
            //     document.body.appendChild(download.iframe);
            // };
            // download.iframe.src = newdownloadUrl;
            // download.iframe.style.display = "none";

3.form方式

// var $eleForm = $("<form method='get'></form>");
            // $eleForm.attr("action", "https://codeload.github.com/douban/douban-client/legacy.zip/master");
            // $eleForm.attr("action", url);
            // $(document.body).append($eleForm);
            // $eleForm.submit();

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 全局安裝是把包安裝在Node安裝目錄下的node_modules文件夾中,一般在 \Users\用戶名\AppData\Roaming\ 目錄下,可以使用npm root -g查看全局安裝目錄 本地(局部)安裝是把包安裝在指定項目(要在指定的根目錄下輸入命令)的node_modules文件夾下(若沒 ...
  • 主要用於調試,顯示信息,重點看例子在瀏覽器 JavaScript 中,通常 window 是全局對象, Node.js 中的全局對象是 global####__filename__filename 表示當前正在執行的腳本的文件名。它將輸出文件所在位置的絕對路徑,且和命令行參數所指定的文件名不一定相同 ...
  • 第一階段: C/S(client server) B/S(browser server) 網頁製作 + 技術棧: PhotoShop、HTML、CSS 第二階段: 從靜態到動態,從後端到前端 前端開發工程師 前後端分離 + 後臺: 完成數據的分析和業務邏輯編寫(包含API介面編寫) + 前端: 網頁 ...
  • 先上源碼,版本是ES6 13行常規(700bytes) shortest snake game.html 壓縮後的500bytes(當然兩處document還是可以用eval壓縮的) index.500bytes.html 之前很火的20行代碼地址(有BUG)(900bytes) hj7jay/ar ...
  • 冒泡的概念就是 當子元素觸發事件的時候 相應的祖宗十八代素也會觸發相同的事件(前提父元素也添加了一樣的事件)eg:兒子 有一個onclick 祖宗十八代 也有onclick 當點擊兒子的時候 祖宗十八代的點擊事件也會被觸發 有時候這種情況會導致很多問題 所以要阻止冒泡 只有被點擊的元素才觸發事件 不... ...
  • 一. 什麼是消息隊列? 消息(Message)是指在應用間傳送的數據。消息可以非常簡單,比如只包含文本字元串,也可以更複雜,可能包含嵌入對象。 消息隊列(Message Queue)是一種應用間的通信方式,消息發送後可以立即返回,由消息系統來確保消息的可靠傳遞。消息發佈者只管把消息發佈到 MQ 中而 ...
  • // my.js function $(id){return document.getElementById(id)};function show(obj){obj.style.display = "block"};function hide(obj){obj.style.display = "no ...
  • 最近項目中客戶需要實現身份證識別功能,合理計划了之後決定使用百度ai的身份證識別。 身份證識別是文字識別的一種,類似的功能有很多比如駕駛證識別等等,原理都是相同的。 對於前端初學者來說,如果要實現這種功能靠頁面,js是實現不了的,可以確定地說就是讓後臺配合實現。實現過程是上傳一張圖片給後臺,後臺使用 ...
一周排行
    -Advertisement-
    Play Games
  • 前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據,比如SQL伺服器的連接串或者是OAuth2的Secret等,這些敏感數據在代碼中是不太安全的,我們不應該在源代碼中存儲密碼和其他的敏感數據,一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • 新改進提供的Taurus Rpc 功能,可以簡化微服務間的調用,同時可以不用再手動輸出模塊名稱,或調用路徑,包括負載均衡,這一切,由框架實現並提供了。新的Taurus Rpc 功能,將使得服務間的調用,更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型,用戶可以根據需要進行修改 ...
  • 前言 整理這個官方翻譯的系列,原因是網上大部分的 tomcat 版本比較舊,此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎,輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 如果讓你來做一個有狀態流式應用的故障恢復,你會如何來做呢? 單機和多機會遇到什麼不同的問題? Flink Checkpoint 是做什麼用的?原理是什麼? ...
  • C++ 多級繼承 多級繼承是一種面向對象編程(OOP)特性,允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護,並促進代碼重用。 多級繼承的語法 在 C++ 中,使用 : 符號來指定繼承關係。多級繼承的語法如下: class DerivedClass : public BaseClass1 ...
  • 前言 什麼是SpringCloud? Spring Cloud 是一系列框架的有序集合,它利用 Spring Boot 的開發便利性簡化了分散式系統的開發,比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子,而是將市面上開發得比較好的模塊集成進去,進行封裝,從 ...
  • class_template 類模板和函數模板的定義和使用類似,我們已經進行了介紹。有時,有兩個或多個類,其功能是相同的,僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • 目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制),V是羅馬數字5,是UNI ...