前端實現文件下載所有方式

来源:https://www.cnblogs.com/pythonywy/archive/2019/10/14/11671303.html

一.a標簽完成 二.js實現下載 三.js中ajax實現音頻或者視頻不跳轉進行文件下載 寫代碼的思路 四.fetch實現 ...


一.a標簽完成

<a href="文件鏈接" download='下載文件名'></a>
<--!但是其中的download對應音頻文件和視頻文件無效-->

二.js實現下載

<script>
    const a = document.createElement('a');
    a.setAttribute('href', '文件鏈接');    //a.href='文件鏈接'
    a.setAttribute('download', '文件名');   //a.download='文件名'
    a.click();
</script>

三.js中ajax實現音頻或者視頻不跳轉進行文件下載

寫代碼的思路

先請求音頻的鏈接,再把返回值轉換成二進位,再根據他二進位對象生成新鏈接,再創建a標簽,點擊a標簽

//這是vue裡面的寫的普通頁面也差不多
<script>
    this.$axios({
    method: 'get',
    url: row.src,
    responseType: 'blob'  //這個不能少,讓response二進位形式,如果你按照網上教程不設置這個將返回值進行BLOB([])進行處理可能會出現解析錯誤
}).then(response => {
    const href = URL.createObjectURL(response.data); //根據二進位對象創造新的鏈接
    const a = document.createElement('a');
    a.setAttribute('href', href);
    a.setAttribute('download', row.title);
    a.click();
    URL.revokeObjectURL(href);
}
</script>

四.fetch實現

//原理和ajax一模一樣
function request() {
  fetch('<介面地址>', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: '<請求參數:json字元串>',
  })
    .then(res => res.blob())
    .then(data => {
      let blobUrl = window.URL.createObjectURL(data);
      download(blobUrl);
    });
}
 
function download(blobUrl) {
  const a = document.createElement('a');
  a.download = '<文件名>';
  a.href = blobUrl;
  a.click();
}
 
request();

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

更多相關文章
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv ...
  • 初識Nodejs Node.js的誕生 作者Ryan Dahl 瑞恩·達爾 2004 紐約 讀數學博士 2006 退學到智利 轉向開發 2009.5對外宣佈node項目,年底js大會發表演講 2010 加入Joyent雲計算公司 2012 退居幕後 作者Ryan Dahl 瑞恩·達爾 2004 紐約 ...
  • 通配符選擇器 * 與任何元素匹配 派生選擇器: 後代選擇器(包含選擇器):後代選擇器可以選擇作為元素後代的元素 A B 對A元素中的B元素應用樣式 後代選擇器中兩個元素間的層次間隔可以是無限的(也可A B C) ,以上 A B 應用樣式會選擇從A繼承的所有B元素 子元素選擇器:只選擇某個元素的子元素 ...
  • 首發於微信公眾號《前端成長記》,寫於 2019.10.12 導讀 有句老話說的好,好記性不如爛筆頭。人生中,總有那麼些東西你願去執筆寫下。 本文旨在把整個搭建的過程和遇到的問題及解決方案記錄下來,希望能夠給你帶來些許幫助。 本文涉及的主要技術: "Vue3.0 Composition API" "G ...
  • 看了知乎上的話題 如何才能通俗易懂的解釋javascript裡面的‘閉包’?,受到一些啟發,因此結合實例將回答中幾個精要的答案做一個簡單的分析以便加深理解。 1. "閉包就是跨作用域訪問變數。" 【示例一】 在 getName 函數中獲取 name,首先在 getName 函數的作用域中查找 nam ...
  • 前面,跟大家簡單地介紹了負載均衡和Nginx的一些基礎配置( "Nginx負載均衡配置實例" ),接下來,跟大家介紹一下Nginx的常用命令,便於日常的運維。 "查看原文" 停止Nginx的方法 通過之前的學習,大家知道瞭如何配置並啟動Nginx,但如果想停止Nginx服務,該如何操作呢?下麵介紹停 ...
  • npm multer 文件上傳 Express app 範本就不寫了,僅記錄一下上傳部分的代碼。 const fs = require('fs'); const express = require('express'); const multer = require('multer'); const ...
  • webpack 插件 ProvidePlugin:自動載入模塊,而不必到處 import 或 require 。 ...
一周排行
  • 一、直接使用線程的問題每次都要創建Thread對象,並向操作系統申請創建一個線程,這是需要耗費CPU時間和記憶體資源的。無法直接獲取線程函數返回值無法直接捕捉線程函數內發生的異常 使用線程池可以解決第一個問題二、.NET中的線程池 在這裡只簡單的介紹一下ThreadPool,由於TPL的存在,我工作中... ...
  • 上次課程我們新建了管理員的模板頁。 本次我們就完善這個模板頁,順便加入樣式和一些基本的組件,配置好整個項目的UI風格。 一、引入 共用的css和js文件 後端庫用nuget, 前端庫用libman. 右鍵wwwroot文件夾,選擇菜單 Add / Client-Side Library 我們使用ad ...
  • 場景 在使用IIS部署ASP.NET的Web項目時提示: InvalidOperationException:未能映射路徑“/” 註: 博客: https://blog.csdn.net/badao_liumang_qizhi 關註公眾號 霸道的程式猿 獲取編程相關電子書、教程推送與免費下載。 實現 ...
  • 場景 ASP.NET中新建MVC項目並連接SqlServer資料庫實現增刪改查: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107024544 在上面實現了新建簡單的MVC項目以及連接資料庫實現簡單的增刪改查後怎樣將網站部署到 ...
  • --先給GridView控制項註冊滑鼠按下事件gv.MouseDown += new System.Windows.Forms.MouseEventHandler(this.gv_MouseDown); --在滑鼠按下事件裡面增加滑鼠右鍵判斷,並增加滑鼠右鍵菜單複製單元格功能。 private voi ...
  • 用C#代替Javascript來做Web應用,是有多爽? 今天聊聊 Blazor。 Blazor 是一個 Web UI 框架。這個框架允許開發者使用 C# 來創建可運行於瀏覽器的具有完全交互 UI 的 Web 應用。 可以理解為,這是一個 C# 語言的 Vue / Angular / React,可 ...
  • 場景 ASP.NET中新建Web網站並部署到IIS上(詳細圖文教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107199747 在上面博客中已經將網站部署到了IIS上。 但是如果網站很大,頁面比較多,甚至每個頁面都有不少 ...
  • 從事這麼多年的.NET,這段時間來,學習另外一門技術Python。 購買相關的書籍,不停地看書。 然後在VS安裝Python,然後可以上機練習,編寫代碼...... ...
  • 一個微小的投入就會帶來巨大的突變 集群安全模式 為什麼出現集群安全模式呢? ​ Namenode啟動時,首先將鏡像文件載人記憶體,並執行編輯日誌中的各項操作。一旦在內存中成功建立文件系統元數據的映像,則創建一個新的Fsimage文件和一個空的編輯日誌。此時,** Namenode開始監聽Datanod ...
  • 1. 通過new對象實現反射機制( 對象.getClass() ) 2. 通過路徑實現反射機制( Class.forName("包名.類名") ) 3. 通過類名實現反射機制 ( 類名.Class ) class Student { private int id; String name; prot ...