前端实现视频或者图片直链下载
前端通过a标签点击视频直链或者图片直链，会单独打开页面并进行播放视频或者展示图片，但是不会实现直接下载。
为了解决这一问题，我们可以通过以下方法，实现视频或者图片直链下载
downVideo (url, name){ var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'arraybuffer'; // 返回类型blob xhr.onload = function () { if (xhr.readyState === 4 && xhr.status === 200) { let blob = this.response; // 转换一个blob链接 let u = window.URL.createObjectURL(new Blob([blob],{ type: 'video/mp4' })) // 视频的type是video/mp4，图片是image/jpeg let a = document.createElement('a'); a.download = name; // 设置下载的文件名 a.href = u; a.style.display = 'none' document.body.appendChild(a) a.click(); a.remove(); } }; xhr.send() } //调用 点击按钮实现mp4格式视频下载 downVideo(video.download_url,video.title)
index.html中加上这一句
<meta name=referrer content=no-referrer>
备注：blob 导出 的content-type 类型
1 Response.AddHeader(“content-type”, “application/x-msdownload;”);类型列表 2 “."=“application/octet-stream” 3 “.001”=“application/x-001” 4 “.301”=“application/x-301” 5 “.323”=“text/h323” 6 “.906”=“application/x-906” 7 “.907”=“drawing/907” 8 “.a11”=“application/x-a11” 9 “.acp”=“audio/x-mei-aac” 10 “.ai”=“application/postscript” 11 “.aif”=“audio/aiff” 12 “.aifc”=“audio/aiff” 13 “.aiff”=“audio/aiff” 14 “.anv”=“application/x-anv” 15 “.asa”=“text/asa” 16 “.asf”=“video/x-ms-asf” 17 “.asp”=“text/asp” 18 “.asx”=“video/x-ms-asf” 19 “.au”=“audio/basic” 20 “.avi”=“video/avi” 21 “.awf”=“application/vnd.adobe.workflow” 22 “.biz”=“text/xml” 23 “.bmp”=“application/x-bmp” 24 “.bot”=“application/x-bot” 25 “.c4t”=“application/x-c4t” 26 “.c90”=“application/x-c90” 27 “.cal”=“application/x-cals” 28 “.cat”=“application/vnd.ms-pki.seccat” 29 “.cdf”=“application/x-netcdf” 30 “.cdr”=“application/x-cdr” 31 “.cel”=“application/x-cel” 32 “.cer”=“application/x-x509-ca-cert” 33 “.cg4”=“application/x-g4” 34 “.cgm”=“application/x-cgm” 35 “.cit”=“application/x-cit” 36 “.class”="java/” 37 “.cml”=“text/xml” 38 “.cmp”=“application/x-cmp” 39 “.cmx”=“application/x-cmx” 40 “.cot”=“application/x-cot” 41 “.crl”=“application/pkix-crl” 42 “.crt”=“application/x-x509-ca-cert” 43 “.csi”=“application/x-csi” 44 “.css”=“text/css” 45 “.cut”=“application/x-cut” 46 “.dbf”=“application/x-dbf” 47 “.dbm”=“application/x-dbm” 48 “.dbx”=“application/x-dbx” 49 “.dcd”=“text/xml” 50 “.dcx”=“application/x-dcx” 51 “.der”=“application/x-x509-ca-cert” 52 “.dgn”=“application/x-dgn” 53 “.dib”=“application/x-dib” 54 “.dll”=“application/x-msdownload” 55 “.doc”=“application/msword” 56 “.dot”=“application/msword” 57 “.drw”=“application/x-drw” 58 “.dtd”=“text/xml” 59 “.dwf”=“Model/vnd.dwf” 60 “.dwf”=“application/x-dwf” 61 “.dwg”=“application/x-dwg” 62 “.dxb”=“application/x-dxb” 63 “.dxf”=“application/x-dxf” 64 “.edn”=“application/vnd.adobe.edn” 65 “.emf”=“application/x-emf” 66 “.eml”=“message/rfc822” 67 “.ent”=“text/xml” 68 “.epi”=“application/x-epi” 69 “.eps”=“application/x-ps” 70 “.eps”=“application/postscript” 71 “.etd”=“application/x-ebx” 72 “.exe”=“application/x-msdownload” 73 “.fax”=“image/fax” 74 “.fdf”=“application/vnd.fdf” 75 “.fif”=“application/fractals” 76 “.fo”=“text/xml” 77 “.frm”=“application/x-frm” 78 “.g4”=“application/x-g4” 79 “.gbr”=“application/x-gbr” 80 “.gcd”=“application/x-gcd” 81 “.gif”=“image/gif” 82 “.gl2”=“application/x-gl2” 83 “.gp4”=“application/x-gp4” 84 “.hgl”=“application/x-hgl” 85 “.hmr”=“application/x-hmr” 86 “.hpg”=“application/x-hpgl” 87 “.hpl”=“application/x-hpl” 88 “.hqx”=“application/mac-binhex40” 89 “.hrf”=“application/x-hrf” 90 “.hta”=“application/hta” 91 “.htc”=“text/x-component” 92 “.htm”=“text/html” 93 “.html”=“text/html” 94 “.htt”=“text/webviewhtml” 95 “.htx”=“text/html” 96 “.icb”=“application/x-icb” 97 “.ico”=“image/x-icon” 98 “.ico”=“application/x-ico” 99 “.iff”=“application/x-iff” 100 “.ig4”=“application/x-g4” 101 “.igs”=“application/x-igs” 102 “.iii”=“application/x-iphone” 103 “.img”=“application/x-img” 104 “.ins”=“application/x-internet-signup” 105 “.isp”=“application/x-internet-signup” 106 “.IVF”=“video/x-ivf” 107 “.java”=“java/*” 108 “.jfif”=“image/jpeg” 109 “.jpe”=“image/jpeg” 110 “.jpe”=“application/x-jpe” 111 “.jpeg”=“image/jpeg” 112 “.jpg”=“image/jpeg” 113 “.jpg”=“application/x-jpg” 114 “.js”=“application/x-javascript” 115 “.jsp”=“text/html” 116 “.la1”=“audio/x-liquid-file” 117 “.lar”=“application/x-laplayer-reg” 118 “.latex”=“application/x-latex” 119 “.lavs”=“audio/x-liquid-secure” 120 “.lbm”=“application/x-lbm” 121 “.lmsff”=“audio/x-la-lms” 122 “.ls”=“application/x-javascript” 123 “.ltr”=“application/x-ltr” 124 “.m1v”=“video/x-mpeg” 125 “.m2v”=“video/x-mpeg” 126 “.m3u”=“audio/mpegurl” 127 “.m4e”=“video/mpeg4” 128 “.mac”=“application/x-mac” 129 “.man”=“application/x-troff-man” 130 “.math”=“text/xml” 131 “.mdb”=“application/msaccess” 132 “.mdb”=“application/x-mdb” 133 “.mfp”=“application/x-shockwave-flash” 134 “.mht”=“message/rfc822” 135 “.mhtml”=“message/rfc822” 136 “.mi”=“application/x-mi” 137 “.mid”=“audio/mid” 138 “.midi”=“audio/mid” 139 “.mil”=“application/x-mil” 140 “.mml”=“text/xml” 141 “.mnd”=“audio/x-musicnet-download” 142 “.mns”=“audio/x-musicnet-stream” 143 “.mocha”=“application/x-javascript” 144 “.movie”=“video/x-sgi-movie” 145 “.mp1”=“audio/mp1” 146 “.mp2”=“audio/mp2” 147 “.mp2v”=“video/mpeg” 148 “.mp3”=“audio/mp3” 149 “.mp4”=“video/mpeg4” 150 “.mpa”=“video/x-mpg” 151 “.mpd”=“application/vnd.ms-project” 152 “.mpe”=“video/x-mpeg” 153 “.mpeg”=“video/mpg” 154 “.mpg”=“video/mpg” 155 “.mpga”=“audio/rn-mpeg” 156 “.mpp”=“application/vnd.ms-project” 157 “.mps”=“video/x-mpeg” 158 “.mpt”=“application/vnd.ms-project” 159 “.mpv”=“video/mpg” 160 “.mpv2”=“video/mpeg” 161 “.mpw”=“application/vnd.ms-project” 162 “.mpx”=“application/vnd.ms-project” 163 “.mtx”=“text/xml” 164 “.mxp”=“application/x-mmxp” 165 “.net”=“image/pnetvue” 166 “.nrf”=“application/x-nrf” 167 “.nws”=“message/rfc822” 168 “.odc”=“text/x-ms-odc” 169 “.out”=“application/x-out” 170 “.p10”=“application/pkcs10” 171 “.p12”=“application/x-pkcs12” 172 “.p7b”=“application/x-pkcs7-certificates” 173 “.p7c”=“application/pkcs7-mime” 174 “.p7m”=“application/pkcs7-mime” 175 “.p7r”=“application/x-pkcs7-certreqresp” 176 “.p7s”=“application/pkcs7-signature” 177 “.pc5”=“application/x-pc5” 178 “.pci”=“application/x-pci” 179 “.pcl”=“application/x-pcl” 180 “.pcx”=“application/x-pcx” 181 “.pdf”=“application/pdf” 182 “.pdf”=“application/pdf” 183 “.pdx”=“application/vnd.adobe.pdx” 184 “.pfx”=“application/x-pkcs12” 185 “.pgl”=“application/x-pgl” 186 “.pic”=“application/x-pic” 187 “.pko”=“application/vnd.ms-pki.pko” 188 “.pl”=“application/x-perl” 189 “.plg”=“text/html” 190 “.pls”=“audio/scpls” 191 “.plt”=“application/x-plt” 192 “.png”=“image/png” 193 “.png”=“application/x-png” 194 “.pot”=“application/vnd.ms-powerpoint” 195 “.ppa”=“application/vnd.ms-powerpoint” 196 “.ppm”=“application/x-ppm” 197 “.pps”=“application/vnd.ms-powerpoint” 198 “.ppt”=“application/vnd.ms-powerpoint” 199 “.ppt”=“application/x-ppt” 200 “.pr”=“application/x-pr” 201 “.prf”=“application/pics-rules” 202 “.prn”=“application/x-prn” 203 “.prt”=“application/x-prt” 204 “.ps”=“application/x-ps” 205 “.ps”=“application/postscript” 206 “.ptn”=“application/x-ptn” 207 “.pwz”=“application/vnd.ms-powerpoint” 208 “.r3t”=“text/vnd.rn-realtext3d” 209 “.ra”=“audio/vnd.rn-realaudio” 210 “.ram”=“audio/x-pn-realaudio” 211 “.ras”=“application/x-ras” 212 “.rat”=“application/rat-file” 213 “.rdf”=“text/xml” 214 “.rec”=“application/vnd.rn-recording” 215 “.red”=“application/x-red” 216 “.rgb”=“application/x-rgb” 217 “.rjs”=“application/vnd.rn-realsystem-rjs” 218 “.rjt”=“application/vnd.rn-realsystem-rjt” 219 “.rlc”=“application/x-rlc” 220 “.rle”=“application/x-rle” 221 “.rm”=“application/vnd.rn-realmedia” 222 “.rmf”=“application/vnd.adobe.rmf” 223 “.rmi”=“audio/mid” 224 “.rmj”=“application/vnd.rn-realsystem-rmj” 225 “.rmm”=“audio/x-pn-realaudio” 226 “.rmp”=“application/vnd.rn-rn_music_package” 227 “.rms”=“application/vnd.rn-realmedia-secure” 228 “.rmvb”=“application/vnd.rn-realmedia-vbr” 229 “.rmx”=“application/vnd.rn-realsystem-rmx” 230 “.rnx”=“application/vnd.rn-realplayer” 231 “.rp”=“image/vnd.rn-realpix” 232 “.rpm”=“audio/x-pn-realaudio-plugin” 233 “.rsml”=“application/vnd.rn-rsml” 234 “.rt”=“text/vnd.rn-realtext” 235 “.rtf”=“application/msword” 236 “.rtf”=“application/x-rtf” 237 “.rv”=“video/vnd.rn-realvideo” 238 “.sam”=“application/x-sam” 239 “.sat”=“application/x-sat” 240 “.sdp”=“application/sdp” 241 “.sdw”=“application/x-sdw” 242 “.sit”=“application/x-stuffit” 243 “.slb”=“application/x-slb” 244 “.sld”=“application/x-sld” 245 “.slk”=“drawing/x-slk” 246 “.smi”=“application/smil” 247 “.smil”=“application/smil” 248 “.smk”=“application/x-smk” 249 “.snd”=“audio/basic” 250 “.sol”=“text/plain” 251 “.sor”=“text/plain” 252 “.spc”=“application/x-pkcs7-certificates” 253 “.spl”=“application/futuresplash” 254 “.spp”=“text/xml” 255 “.ssm”=“application/streamingmedia” 256 “.sst”=“application/vnd.ms-pki.certstore” 257 “.stl”=“application/vnd.ms-pki.stl” 258 “.stm”=“text/html” 259 “.sty”=“application/x-sty” 260 “.svg”=“text/xml” 261 “.swf”=“application/x-shockwave-flash” 262 “.tdf”=“application/x-tdf” 263 “.tg4”=“application/x-tg4” 264 “.tga”=“application/x-tga” 265 “.tif”=“image/tiff” 266 “.tif”=“application/x-tif” 267 “.tiff”=“image/tiff” 268 “.tld”=“text/xml” 269 “.top”=“drawing/x-top” 270 “.torrent”=“application/x-bittorrent” 271 “.tsd”=“text/xml” 272 “.txt”=“text/plain” 273 “.uin”=“application/x-icq” 274 “.uls”=“text/iuls” 275 “.vcf”=“text/x-vcard” 276 “.vda”=“application/x-vda” 277 “.vdx”=“application/vnd.visio” 278 “.vml”=“text/xml” 279 “.vpg”=“application/x-vpeg005” 280 “.vsd”=“application/vnd.visio” 281 “.vsd”=“application/x-vsd” 282 “.vss”=“application/vnd.visio” 283 “.vst”=“application/vnd.visio” 284 “.vst”=“application/x-vst” 285 “.vsw”=“application/vnd.visio” 286 “.vsx”=“application/vnd.visio” 287 “.vtx”=“application/vnd.visio” 288 “.vxml”=“text/xml” 289 “.wav”=“audio/wav” 290 “.wax”=“audio/x-ms-wax” 291 “.wb1”=“application/x-wb1” 292 “.wb2”=“application/x-wb2” 293 “.wb3”=“application/x-wb3” 294 “.wbmp”=“image/vnd.wap.wbmp” 295 “.wiz”=“application/msword” 296 “.wk3”=“application/x-wk3” 297 “.wk4”=“application/x-wk4” 298 “.wkq”=“application/x-wkq” 299 “.wks”=“application/x-wks” 300 “.wm”=“video/x-ms-wm” 301 “.wma”=“audio/x-ms-wma” 302 “.wmd”=“application/x-ms-wmd” 303 “.wmf”=“application/x-wmf” 304 “.wml”=“text/vnd.wap.wml” 305 “.wmv”=“video/x-ms-wmv” 306 “.wmx”=“video/x-ms-wmx” 307 “.wmz”=“application/x-ms-wmz” 308 “.wp6”=“application/x-wp6” 309 “.wpd”=“application/x-wpd” 310 “.wpg”=“application/x-wpg” 311 “.wpl”=“application/vnd.ms-wpl” 312 “.wq1”=“application/x-wq1” 313 “.wr1”=“application/x-wr1” 314 “.wri”=“application/x-wri” 315 “.wrk”=“application/x-wrk” 316 “.ws”=“application/x-ws” 317 “.ws2”=“application/x-ws” 318 “.wsc”=“text/scriptlet” 319 “.wsdl”=“text/xml” 320 “.wvx”=“video/x-ms-wvx” 321 “.xdp”=“application/vnd.adobe.xdp” 322 “.xdr”=“text/xml” 323 “.xfd”=“application/vnd.adobe.xfd” 324 “.xfdf”=“application/vnd.adobe.xfdf” 325 “.xhtml”=“text/html” 326 “.xls”=“application/vnd.ms-excel” 327 “.xls”=“application/x-xls” 328 “.xlw”=“application/x-xlw” 329 “.xml”=“text/xml” 330 “.xpl”=“audio/scpls” 331 “.xq”=“text/xml” 332 “.xql”=“text/xml” 333 “.xquery”=“text/xml” 334 “.xsd”=“text/xml” 335 “.xsl”=“text/xml” 336 “.xslt”=“text/xml” 337 “.xwd”=“application/x-xwd” 338 “.x_b”=“application/x-x_b” 339 “.x_t”=“application/x-x_t”
文章参考：
https://blog.csdn.net/baidu_41457482/article/details/117106614
https://blog.csdn.net/antuo7251/article/details/101683763?spm=1001.2014.3001.5501
