vue 项目中 下载保存文件(MP3)

时间:2021-01-14 00:03:45

前面解决了 a标down属性  down不下来的问题。今天来说一下遇到的下载mp3文件的需求。解决图片跨域 用到了canvas。那么mp3格式的文件,可以采用哪些方式down下来呢。

1---form 表单 action 为下载地址 但是form表单有大小限制 对于不固定大小的MP3格式文件明显不友好。

2---file-saver 插件

vue 中应用

安装 

npm install file-saver --save

 

安装后版本号

"file-saver": "^2.0.0-rc.3",

引入

import saveAs from 'file-saver';
var FileSaver = require('file-saver');

 

使用 (通过一个自定义事件 触发该操作)

 FileSaver.saveAs(url地址 可以是动态获取变化的值)

vue 项目中 下载保存文件(MP3)

vue 项目中 下载保存文件(MP3)

vue-aplayer 实用的音乐播放器 

官方文档 https://www.npmjs.com/package/vue-aplayer

vue 项目中 下载保存文件(MP3)

原版正品

vue 项目中 下载保存文件(MP3)

 

样式可手工定制 自定义DIY /滑稽

类iPhone音乐播放界面 实际体验很丝滑 很有仪式感 (点击后如唱片机一般更好)

自动获取歌曲时间  时长小于1秒默认0

vue 项目中 下载保存文件(MP3)

 vue 项目中 下载保存文件(MP3)

小拇指个一点

vue 项目中 下载保存文件(MP3)

完美~~~~~~~~