JS directly downloads pictures and videos instead of opening previews

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 {any} url url Link address
 4         * @param {any} strFileName file name
 5         * @param {any} 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 {any} 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

 

 

 

Tags: Javascript Excel encoding Firefox

Posted on Sat, 09 May 2020 11:47:18 -0400 by kid85