The attachment list in a project usually needs to provide the function of downloading and deleting. The function itself has nothing to say. It is a basic function. The download function of the browser is also used in the way of window.open(url), or window.location.href=url. The url is the attachment Download interface. The browser automatically resolves it. If it is in the format of picture, video, txt, etc., it will be straight Connect the preview file instead of downloading directly like docx and xlsx. In order to make the function clear, a view button is added to the preview separately. The download button needs to download directly no matter what file format.
There are two ways to deal with it:
1, Background interface level processing: (relatively common)
Add ID to response header:
Response.AddHeader("Content-Disposition", "attachment; filename=" +
HttpUtility.UrlEncode(annotation.FileName, System.Text.Encoding.UTF8));
After adding, all browsers will download directly, regardless of file format
2, Front end JS uses XMLHttpRequest in combination with download.js
1) First, download.js needs to be referenced in the page
Download official: http://danml.com/download.html
http://danml.com/js/download2.js
2) Public method
1 /* 2 * Use download.js to force the browser to download pictures, videos and other files 3 * @param url url Link address 4 * @param strFileName file name 5 * @param strMimeType file type 6 * dzl 7 * 2020 May 8, 2008 8 */ 9 function downloadfile(url, strFileName, strMimeType) { 10 var xmlHttp = null; 11 if (window.ActiveXObject) { 12 // IE6, IE5 Browser execution code 13 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 14 } else if (window.XMLHttpRequest) { 15 // IE7+, Firefox, Chrome, Opera, Safari Browser execution code 16 xmlHttp = new XMLHttpRequest(); 17 } 18 //2.If the instantiation is successful, call open()method: 19 if (xmlHttp != null) { 20 xmlHttp.open("get", url, true); 21 xmlHttp.responseType = 'blob';//crux 22 xmlHttp.send(); 23 xmlHttp.onreadystatechange = doResult; //Set callback function 24 } 25 function doResult() { 26 if (xmlHttp.readyState == 4) { //4 Indicates execution complete 27 if (xmlHttp.status == 200) { //200 Indicates successful execution 28 download(xmlHttp.response, strFileName, strMimeType); 29 } 30 } 31 } 32 }
Note: xmlhttp.responsetype ='blob '; is critical and must be set
3) download the button to click the event to call the public method.
downloadfile(url, filename, getFileType(filename))
Attach a common method to return the file type based on the suffix of the file name:
1 /* 2 * Returns the file type based on the suffix of the file name 3 * @param fileName file name 4 * dzl 5 * 2020 May 9, 2009 6 */ 7 function getFileType(fileName) { 8 // Suffix acquisition 9 let suffix = ''; 10 // Get type results 11 let result = ''; 12 try { 13 const flieArr = fileName.split('.'); 14 suffix = flieArr[flieArr.length - 1]; 15 } catch (err) { 16 suffix = ''; 17 } 18 // fileName No suffix return false 19 if (!suffix) { return false; } 20 suffix = suffix.toLocaleLowerCase(); 21 // Picture format 22 const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']; 23 // Match pictures 24 result = imglist.find(item => item === suffix); 25 if (result) { 26 return 'image'; 27 } 28 // matching txt 29 const txtlist = ['txt']; 30 result = txtlist.find(item => item === suffix); 31 if (result) { 32 return 'txt'; 33 } 34 // matching excel 35 const excelist = ['xls', 'xlsx']; 36 result = excelist.find(item => item === suffix); 37 if (result) { 38 return 'excel'; 39 } 40 // matching word 41 const wordlist = ['doc', 'docx']; 42 result = wordlist.find(item => item === suffix); 43 if (result) { 44 return 'word'; 45 } 46 // matching pdf 47 const pdflist = ['pdf']; 48 result = pdflist.find(item => item === suffix); 49 if (result) { 50 return 'pdf'; 51 } 52 // matching ppt 53 const pptlist = ['ppt', 'pptx']; 54 result = pptlist.find(item => item === suffix); 55 if (result) { 56 return 'ppt'; 57 } 58 // Match video 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 // Match audio 65 const radiolist = ['mp3', 'wav', 'wmv']; 66 result = radiolist.find(item => item === suffix); 67 if (result) { 68 return 'radio'; 69 } 70 // Other file types 71 return 'other'; 72 }
Some technical references:
https://www.cnblogs.com/allen0118/p/12793501.html
https://blog.csdn.net/u014643351/article/details/99303871
