JS端實現圖片、視頻時直接下載而不是打開預覽

来源:https://www.cnblogs.com/adingfirstlove/archive/2020/05/09/12856264.html
-Advertisement-
Play Games

後臺介面層面+JS使用XMLHttpRequest結合download.js兩種方式實現瀏覽器直接下載文件 ...


項目中的附件列表,通常情況都需要提供下載、刪除的功能,功能本身沒有什麼要說的,都是基本功能,使用瀏覽器的的下載功能,也都是用window.open(url),或者window.location.href=url的方式,url即為附件下載介面,瀏覽器自動解析,如果是圖片、視頻、txt等格式的會直接預覽文件,而不是像docx、xlsx一樣直接下載,項目中為了功能明確,將預覽單獨加了一個查看按鈕,下載按鈕要實現無論什麼文件格式都直接下載。

 

有兩種方式處理:
一.後臺介面層面處理:(比較常見)
響應頭中添加標識:
Response.AddHeader("Content-Disposition", "attachment; filename=" +
HttpUtility.UrlEncode(annotation.FileName, System.Text.Encoding.UTF8));

添加後,瀏覽器就會全都直接下載,不區分文件格式

 

二.前端JS使用XMLHttpRequest結合download.js處理

1)首先頁面中需要引用download.js

download官方:http://danml.com/download.html  

http://danml.com/js/download2.js

 

2)公共方法

 1  /*
 2         * 使用download.js 強制瀏覽器下載圖片、視頻等文件
 3         * @param {any} url url鏈接地址
 4         * @param {any} strFileName 文件名
 5         * @param {any} strMimeType 文件類型
 6         * dzl
 7         * 2020年5月8日
 8          */
 9         function downloadfile(url, strFileName, strMimeType) {
10             var xmlHttp = null;
11             if (window.ActiveXObject) {
12                 // IE6, IE5 瀏覽器執行代碼
13                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
14             } else if (window.XMLHttpRequest) {
15                 // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
16                 xmlHttp = new XMLHttpRequest();
17             }
18             //2.如果實例化成功,就調用open()方法:
19             if (xmlHttp != null) {
20                 xmlHttp.open("get", url, true);
21                 xmlHttp.responseType = 'blob';//關鍵
22                 xmlHttp.send();
23                 xmlHttp.onreadystatechange = doResult; //設置回調函數
24             }
25             function doResult() {
26                 if (xmlHttp.readyState == 4) { //4表示執行完成
27                     if (xmlHttp.status == 200) { //200表示執行成功
28                         download(xmlHttp.response, strFileName, strMimeType);
29                     }
30                 }
31             }
32         }

註意: xmlHttp.responseType = 'blob';是關鍵,必須要設置

3)下載按鈕點擊事件中調用公共方法

downloadfile(url, filename, getFileType(filename))

 

附上根據文件名的尾綴 返迴文件類型的公共方法:

 1 /*
 2  * 根據文件名的尾綴 返迴文件類型
 3  * @param {any} fileName 文件名
 4  * dzl
 5  * 2020年5月9日
 6  */
 7 function getFileType(fileName) {
 8     // 尾碼獲取
 9     let suffix = '';
10     // 獲取類型結果
11     let result = '';
12     try {
13         const flieArr = fileName.split('.');
14         suffix = flieArr[flieArr.length - 1];
15     } catch (err) {
16         suffix = '';
17     }
18     // fileName無尾碼返回 false
19     if (!suffix) { return false; }
20     suffix = suffix.toLocaleLowerCase();
21     // 圖片格式
22     const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
23     // 進行圖片匹配
24     result = imglist.find(item => item === suffix);
25     if (result) {
26         return 'image';
27     }
28     // 匹配txt
29     const txtlist = ['txt'];
30     result = txtlist.find(item => item === suffix);
31     if (result) {
32         return 'txt';
33     }
34     // 匹配 excel
35     const excelist = ['xls', 'xlsx'];
36     result = excelist.find(item => item === suffix);
37     if (result) {
38         return 'excel';
39     }
40     // 匹配 word
41     const wordlist = ['doc', 'docx'];
42     result = wordlist.find(item => item === suffix);
43     if (result) {
44         return 'word';
45     }
46     // 匹配 pdf
47     const pdflist = ['pdf'];
48     result = pdflist.find(item => item === suffix);
49     if (result) {
50         return 'pdf';
51     }
52     // 匹配 ppt
53     const pptlist = ['ppt', 'pptx'];
54     result = pptlist.find(item => item === suffix);
55     if (result) {
56         return 'ppt';
57     }
58     // 匹配 視頻
59     const videolist = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v'];
60     result = videolist.find(item => item === suffix);
61     if (result) {
62         return 'video';
63     }
64     // 匹配 音頻
65     const radiolist = ['mp3', 'wav', 'wmv'];
66     result = radiolist.find(item => item === suffix);
67     if (result) {
68         return 'radio';
69     }
70     // 其他 文件類型
71     return 'other';
72 }
View Code

 

部分技術參考:

https://www.cnblogs.com/allen0118/p/12793501.html

https://blog.csdn.net/u014643351/article/details/99303871

 

 

 

 


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

-Advertisement-
Play Games
更多相關文章
  • 表結構 student(StuId,StuName,StuAge,StuSex) 學生表 teacher(TId,Tname) 教師表 course(CId,Cname,C_TId) 課程表 sc(SId,S_CId,Score) 成績表 問題七:查詢學過“葉平”老師所教的所有課的同學的學號、姓名 ...
  • val rdd3 = sc.parallelize(List("12","23","345","4567"),2) rdd3.aggregate("")((x,y) => math.max(x.length, y.length).toString, (x,y) => x + y) 兩個分區先計算出字 ...
  • 一、先上成型之後的圖 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="CSS/base.css"> <link rel=" ...
  • 基本數據類型,拷貝是直接拷貝變數的值,而引用類型拷貝的其實是變數的地址而淺拷貝和深拷貝就是在這個基礎之上做的區分,如果在拷貝這個對象的時候,只對基本數據類型進行了拷貝,而對引用數據類型只是進行了引用的傳遞,而沒有重新創建一個新的對象,則認為是淺拷貝。反之,在對引用數據類型進行拷貝的時候,創建了一個新 ...
  • 前言 在看書的過程中,發現有一些內容屬於那種邊邊角角容易忘記卻又非常重要。 所以,在這裡留下一篇筆記,以便查閱。 第1章 js簡介 js組成部分:ECMAScript、DOM、BOM 瀏覽器就是js的解釋器。 DOM是文檔對象模型,通過它來操作網頁對象上的元素,這些元素就是HTML上的各種標簽。 B ...
  • 父級元素包含幾個行內元素 <div id="box"> <p> <span>按鈕</span> <span>測試文字文字文字測試文字文字文字</span> <span>看這裡</span> </p> </div> #box p{ width: 800px; font-size: 30px; } #b ...
  • Angular, one of the most popular software development instruments and it is a part of the Javascript ecosystem. It was introduced by Google in the yea ...
  • # jQuery選擇元素 - 1.get() 從jQuery對象中獲取某個指定的元素,返回原生的dom對象,所以不能再次鏈式調用jQuery對象的方法,但是可以使用原生的方法,或者再次封裝為jQuery對象 ```js $('demo').get(0). $($('demo').get(0))//再 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...