效果

1，首先照样更改js/controller里的navigation.js文件

选中内容为新增的代码(就是在angular模块内添加以下代码)

下面这段方便复制

    $scope.download_music = (song) => {MediaService.bootstrapTrack(song,(bootinfo) => {const mp3url = bootinfo.urlconst strs = mp3url.split('.'); //字符分割 const houzhui = strs[strs.length-1].substring(0, 3);const filename = song.title +" - "+song.artist;const request = new XMLHttpRequest();request.open("GET", mp3url, true);request.responseType = 'blob';request.onload=function(e){download(x.response, filename+'.'+houzhui);};request.send();},() => {notyf.warning('下载失败，请搜索其他平台');});}

（选填）创建下载时可能会有点延时可以在成功回调里添加一个提醒(红线位置)

notyf.success('正在创建下载歌曲');

2，创建引入外部js文件

这里我引入了一个download2.js的js脚本,这个脚本就是解决跨域下载文件不能正确重命名的方法,这个是别人写好的一个组件网站
你也可以直接在js目录下新建这个download2.js文件

此方法由@Hello_wshuo提供
download2.js文件内容:

//download.js v3.0, by dandavis; 2008-2014. [CCBY2] see http://danml.com/download.html for tests/usage
// v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
// v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
// v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support// data can be a string, Blob, File, or dataURLfunction download(data, strFileName, strMimeType) {var self = window, // this script is only for browsers anyway...u = "application/octet-stream", // this default mime also triggers iframe downloadsm = strMimeType || u, x = data,D = document,a = D.createElement("a"),z = function(a){return String(a);},B = self.Blob || self.MozBlob || self.WebKitBlob || z,BB = self.MSBlobBuilder || self.WebKitBlobBuilder || self.BlobBuilder,fn = strFileName || "download",blob, b,ua,fr;//if(typeof B.bind === 'function' ){ B=B.bind(self); }if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callbackx=[x, m];m=x[0];x=x[1]; }//go ahead and download dataURLs right awayif(String(x).match(/^data\:[\w+\-]+\/[\w+\-]+[,;]/)){return navigator.msSaveBlob ?  // IE10 can't do a[download], only Blobs:navigator.msSaveBlob(d2b(x), fn) : saver(x) ; // everyone else can save dataURLs un-processed}//end if dataURL passed?try{blob = x instanceof B ? x : new B([x], {type: m}) ;}catch(y){if(BB){b = new BB();b.append([x]);blob = b.getBlob(m); // the blob}}function d2b(u) {var p= u.split(/[:;,]/),t= p[1],dec= p[2] == "base64" ? atob : decodeURIComponent,bin= dec(p.pop()),mx= bin.length,i= 0,uia= new Uint8Array(mx);for(i;i<mx;++i) uia[i]= bin.charCodeAt(i);return new B([uia], {type: t});}function saver(url, winMode){if ('download' in a) { //html5 A[download]             a.href = url;a.setAttribute("download", fn);a.innerHTML = "downloading...";D.body.appendChild(a);setTimeout(function() {a.click();D.body.removeChild(a);if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(a.href);}, 250 );}}, 66);return true;}//do iframe dataURL download (old ch+FF):var f = D.createElement("iframe");D.body.appendChild(f);if(!winMode){ // force a mime that will download:url="data:"+url.replace(/^data:([\w\/\-\+]+)/, u);}f.src = url;setTimeout(function(){ D.body.removeChild(f); }, 333);}//end saver if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)return navigator.msSaveBlob(blob, fn);}   if(self.URL){ // simple fast and modern way using Blob and URL:saver(self.URL.createObjectURL(blob), true);}else{// handle non-Blob()+non-URL browsers:if(typeof blob === "string" || blob.constructor===z ){try{return saver( "data:" +  m   + ";base64,"  +  self.btoa(blob)  ); }catch(y){return saver( "data:" +  m   + "," + encodeURIComponent(blob)  ); }}// Blob but not URL:fr=new FileReader();fr.onload=function(e){saver(this.result); };fr.readAsDataURL(blob);}   return true;
} /* end download() */

在 html引入自己新建的js

更改文件是 listen1.html ,在 html 合适位置插入即可

<script type="text/javascript" src="js/download2.js"></script>

3，最后在歌单列表搜索列表位置上添加一个a或span便签即可

大概位置在类名为tools的一个div里（例如下图是当前播放列表的位置）（需要插入多个地方，可以根据自己习惯选择）

下面这段方便复制

 <atitle="{{_DOWNLOAD_SONG}}"class="source-button"ng-click="download_music(song)"ng-show="options && !is_local" ><svg t="1662779991230" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2821" width="512" height="512"><path d="M828.975746 894.125047 190.189132 894.125047c-70.550823 0-127.753639-57.18542-127.753639-127.752616L62.435493 606.674243c0-17.634636 14.308891-31.933293 31.93227-31.933293l63.889099 0c17.634636 0 31.93227 14.298658 31.93227 31.933293l0 95.821369c0 35.282574 28.596292 63.877843 63.87682 63.877843L765.098927 766.373455c35.281551 0 63.87682-28.595268 63.87682-63.877843l0-95.821369c0-17.634636 14.298658-31.933293 31.943526-31.933293l63.877843 0c17.634636 0 31.933293 14.298658 31.933293 31.933293l0 159.699212C956.729385 836.939627 899.538849 894.125047 828.975746 894.125047L828.975746 894.125047zM249.938957 267.509636c12.921287-12.919241 33.884738-12.919241 46.807049 0l148.97087 148.971893L445.716876 94.89323c0-17.634636 14.300704-31.94762 31.933293-31.94762l63.875796 0c17.637706 0 31.945573 14.312984 31.945573 31.94762l0 321.588299 148.97087-148.971893c12.921287-12.919241 33.875528-12.919241 46.796816 0l46.814212 46.818305c12.921287 12.922311 12.921287 33.874505 0 46.807049L552.261471 624.930025c-1.140986 1.137916-21.664416 13.68365-42.315758 13.69286-20.87647 0.010233-41.878806-12.541641-43.020816-13.69286L203.121676 361.13499c-12.922311-12.933567-12.922311-33.884738 0-46.807049L249.938957 267.509636 249.938957 267.509636z" fill="currentColor" p-id="2822"></path></svg></a>

到此完工

Listen 1添加下载功能（列表下载方法）(v2.6)相关推荐

TIA博途WINCC中给IO域添加确认功能的具体方法步骤
TIA博途WINCC中给IO域添加确认功能的具体方法步骤在TIA博途中新建一个项目,添加一个PLC和HMI设备,这里就不再演示添加过程,在PLC默认变量表中添加一个"输出变量", ...
下载功能只能下载1G的文件，解决方法是修改Nginx缓冲文件大小
1.修改nginx代理缓存文件最大值 proxy_max_temp_file_size 4096m; 2. 设置代理超时时间 proxy_send_timeout 300S; # 代理发送超时 pro ...
开启 Chrome、Edge 浏览器的多线程下载功能
浏览器自带下载功能大部分都是单线程下载,比起多线程的专业下载工具来说,单线程的浏览器下载工具实在是太慢了,虽然用起来方便,但速度就是硬伤.不过现在 Chrome 更新了一个新特性,可以让浏览器自带下载 ...
iOS 下载功能(断点续传)
思路步骤: 1.文件的存放 1.1 如果正在下载,放在temp+名称文件下; 1.2 如果下载完成,放在cache+名称文件下. 1.3 这里名称参考SDWebImage里面,使用MD+URL来命名, ...
phpcms如何给已有的模块添加新功能？
phpcms如何给已有的模块添加新功能?方法一:直接在模块里的控制器文件中添加功能.不建议使用此方法,因为一旦phpcms升级,有可能会覆盖模块中的文件, 导致你添加的功能丢失.方法二:新建一个以my ...
玩转PDF虚拟打印机添加文本功能
pdfFactory Pro是一款非常容易上手的虚拟打印机,利用这款虚拟打印机,可以完成很多特殊的任务,如文件加密.添加文本.快照等等. 相信很多小伙伴们在打印的时候突然想起来某些地方需要" ...
Android开发丶一步步教你实现okhttp带进度的列表下载文件功能
大家好,我又回来了! 标题好像又起的不知所云,但是貌似也想不起更好的标题,看看效果图现在有个文件列表,每个列表标签都有一个下载的按钮,点击以下载对应的文件,如果已下载则显示"已下载&quo ...
关于使用DataGrid的ButtonColumn，动态添加DataGrid列，实现不定列n个文件的下载功能...
一.使用DataGrid的ButtonColumn,动态添加DataGrid列,实现不定列n个文件的下载功能在aspx页面中的代码如下: <asp:datagrid id="User ...
钉钉电脑端屏蔽文件上传下载功能的方法
有些时候,为了保证企业内部资料的安全,往往需要屏蔽掉钉钉电脑端文件上传.下载功能.例如,上传功能往往会导致企业内部文件外泄,而下载功能有可能会下载到带毒的文档或者可执行文件.下面就介绍一种通过代理屏蔽 ...
ruoyi中生成的代码表单,如果添加上传功能-模板下载功能
研究了一天了,用网上别人的代码总是出错,这个时候就要看看ruoyi作者的代码,找到并利用起来.参考此文章 https://blog.csdn.net/weixin_46945684/article/d ...

Listen 1添加下载功能（列表下载方法）(v2.6)

效果

1，首先照样更改js/controller里的navigation.js文件

2，创建引入外部js文件

在 html引入自己新建的js

3，最后在歌单列表搜索列表位置上添加一个a或span便签即可

Listen 1添加下载功能（列表下载方法）(v2.6)相关推荐

最新文章

热门文章