vue使用下载插件来完成下载文件

leixign vue下载插件
1.当我使用a标签实现下载的时候，是能解决下载的问题，但是会跳转页面。
2.那么我们使用点击事件后，用window.open或者window.localtion.href，那么也会和使用a标签的效果是一样的，用户体验度，较差。
3.那么我们改成download.js，完成了预期想要的效果，但是遇见一个问题，dowload.js只能自写内容来下载，那么我们如何实现根据url来实现下载的内容那。
我们可以修改
url = !strFileName && !strMimeType && payload；
改为：url = payload；就可以实现效果了。
但是还有一个问题，就是我们直接从download.js中下载的js是()() //注：这种应该是自执行函数
所以在vue调用时会有bug，我们可以把downloadjs中复制download函数中的内容进行修改：
如下所示：（以后需要下载，直接复制用以下内容放入一个新建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...defaultMime = "application/octet-stream", // this default mime also triggers iframe downloadsmimeType = strMimeType || defaultMime,payload = data,// url = !strFileName && !strMimeType && payload,url = payload,anchor = document.createElement("a"),toString = function(a){return String(a);},myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString),fileName = strFileName || "download",blob,reader;myBlob= myBlob.call ? myBlob.bind(self) : Blob ;if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callbackpayload=[payload, mimeType];mimeType=payload[0];payload=payload[1];}if(url && url.length< 2048){ // if no filename and no mime, assume a url was passed as the only argumentfileName = url.split("/").pop().split("?")[0];anchor.href = url; // assign href prop to temp anchorif(anchor.href.indexOf(url) !== -1){ // if the browser determines that it's a potentially valid url path:var ajax=new XMLHttpRequest();ajax.open( "GET", url, true);ajax.responseType = 'blob';ajax.onload= function(e){ download(e.target.response, fileName, defaultMime);};setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return:return ajax;} // end if valid url?} // end if url?//go ahead and download dataURLs right awayif(/^data\:[\w+\-]+\/[\w+\-]+[,;]/.test(payload)){if(payload.length > (1024*1024*1.999) && myBlob !== toString ){payload=dataUrlToBlob(payload);mimeType=payload.type || defaultMime;}else{          return navigator.msSaveBlob ?  // IE10 can't do a[download], only Blobs:navigator.msSaveBlob(dataUrlToBlob(payload), fileName) :saver(payload) ; // everyone else can save dataURLs un-processed}}//end if dataURL passed?blob = payload instanceof myBlob ?payload :new myBlob([payload], {type: mimeType}) ;function dataUrlToBlob(strUrl) {var parts= strUrl.split(/[:;,]/),type= parts[1],decoder= parts[2] == "base64" ? atob : decodeURIComponent,binData= decoder( parts.pop() ),mx= binData.length,i= 0,uiArr= new Uint8Array(mx);for(i;i<mx;++i) uiArr[i]= binData.charCodeAt(i);return new myBlob([uiArr], {type: type});}function saver(url, winMode){if ('download' in anchor) { //html5 A[download]anchor.href = url;anchor.setAttribute("download", fileName);anchor.className = "download-js-link";anchor.innerHTML = "downloading...";anchor.style.display = "none";document.body.appendChild(anchor);setTimeout(function() {anchor.click();document.body.removeChild(anchor);if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(anchor.href);}, 250 );}}, 66);return true;}// handle non-a[download] safari as best we can:if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) {url=url.replace(/^data:([\w\/\-\+]+)/, defaultMime);if(!window.open(url)){ // popup blocked, offer direct download:if(confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")){ location.href=url; }}return true;}//do iframe dataURL download (old ch+FF):var f = document.createElement("iframe");document.body.appendChild(f);if(!winMode){ // force a mime that will download:url="data:"+url.replace(/^data:([\w\/\-\+]+)/, defaultMime);}f.src=url;setTimeout(function(){ document.body.removeChild(f); }, 333);}//end saverif (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)return navigator.msSaveBlob(blob, fileName);}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===toString ){try{return saver( "data:" +  mimeType   + ";base64,"  +  self.btoa(blob)  );}catch(y){return saver( "data:" +  mimeType   + "," + encodeURIComponent(blob)  );}}// Blob but not URL support:reader=new FileReader();reader.onload=function(e){saver(this.result);};reader.readAsDataURL(blob);}return true;
} /* end download() */export default download

在vue组件中引用时：
import download from ‘以上代码的存放路径’
在点击函数事件中：
download(pathData, “download.txt”, “text/plain”);
灵感来源：https://blog.csdn.net/yan263364/article/details/89335536

vue使用下载插件来完成下载文件相关推荐

Android studio下载插件提示无法下载was not installed: Cannot download
提示无法下载的问题是误用了https协议下载导致的解决办法:把Use secure connection取消勾选就行
解决vim-plug无法下载插件或者插件下载过慢的问题
vim-plug这个插件其中有一个操作其实就是把你写在配置文件中的内容转化为一个url,而后用这个url去下载插件. 如果下载不下来,我能想到的解决方法有两个: hosts修改github IP地址 ...
乐影音下载器（视频下载器）官方主页
乐影音下载器6.6(2019-7-5)能下载国内视频网站上面的视频. 你只需要复制视频网址就能自动帮你下载视频,这是你唯一需要做的! 下载:官方下载百度网盘 ...
vue项目中使用a标签下载视频文件
vue项目中使用a标签下载视频文件前提条件: 1.地址为http 2.文件格式为MP4(仅代表这次项目中使用的情况) 示例代码: <el-button size="mini" ...
谷歌浏览器单独下载插件文件crx到本地的方法步骤
描述:谷歌浏览器单独下载插件文件crx到本地的方法步骤步骤: 打开网站,搜索插件名称 https://www.crx4chrome.com/ 进入详情页,点击Download crx file fr ...
sublime 3 本地安装package control插件、channel_v3.json文件配置下载
近期在学习python,网上找到说sublime 编辑器还不错,就下载下来试试.下载安装确实比较简单,不过因为是英文版,我就想尝试汉化,结果网上找了很多资料尝试了很多方法都不行... 好在功夫不负有心 ...
vue后端返回数据流前端导出下载xls文件
后端返回数据流, 前端导出下载xls文件 export function exportMethod() {axios({method:'get',url: url+'params',responseT ...
Vue - 下载打印功能，将页面下载打印为 pdf 格式文件（vue-print-nb）
Vue 使用 vue-print-nb 插件实现打印功能一. vue-print-nb 的使用 1.1 安装 vue-print-nb 1.2. 引入vue-print-nb 二. 一个打印实例使 ...
vue项目使用iconfont（本地下载、彩色icon）
一.vue-element-admin项目使用iconfont(页面+菜单) 1.iconfont下载资源到本地 2.将下好的文件取这5个放在项目assets文件夹里 3.查看iconfont.css ...
vue生成二维码并下载
vue生成二维码图片,这里使用的是qrcode.js 这个插件 1.下载插件 npm install --save qrcodejs2 2.组件内使用 <template> <B ...

vue使用下载插件来完成下载文件

vue使用下载插件来完成下载文件相关推荐

最新文章

热门文章