前端下载的实现

前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑、在线代码编辑、iPresst等)。但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开-》另存为。如下面这个链接:
<a href=”file.js”>file.js</a>
用户点击这个链接的时候,浏览器会打开并显示链接指向的文件内容,显然,这并没有实现我们的需求。HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打开链接指向的文件,而是改为下载(目前只有chrome、firefox和opera支持)。下载时会直接使用链接的名字来作为文件名,但是是可以改的,只要给download加上想要的文件名即可,如:download=“not-a-file.js”。Not enough!但是这样还不够,以上的方法只适合用在文件是在服务器上的情况。如果在浏览器端js生成的内容,想让浏览器进行下载要如何办到呢?其实还是有办法办到的,相信很多人都多少听过了DataURI这个词,比较常见的就是图片的src,如:
<img src=”data:image/gif;base64,R0lGOXXXXX">
DataURI的解释可以移步这里,本人就不在解释了。那么,现在要将js生成的内容进行下载就有法可依了。封装成一个方法如下:JavaScript
function downloadFile(aLink, fileName, content){aLink.download = fileName;aLink.href = "data:text/plain," + content;
}
调用downloadFile之后,用户点击链接,就能触发浏览器下载。Not enough!但是,还不够,上面的办法有两个硬伤,会导致流失很多懒人美眉:下载的文件类型限制死了,美眉要下载处理后的果照怎么办?下载还要再点击一下,太麻烦啦。要解决文件类型的问题,可以用浏览器的新API(URL.createObjectURL)来解决问题,URL.createObjectURL通常都是用来创建图片的DataURI用来显示图片,这里用来下载文件,让浏览器来帮我们设定好文件类型。URL.createObjectURL的参数是File对象或者Blob对象,File对象也就是通过input[type=file]选择的文件,Blob对象是二进制大对象,详细说明可参考这里。现在,我们只要用content创建一个ObjectURL并赋值给aLink即可解决文件类型的限制问题。文件的自动下载也挺好办,自己构建一个UI点击事件,再自动触发下,就能实现自动下载啦。现在来看看最终代码:JavaScript/*let url = new URL('https://example.com?foo=1&bar=2');console.log(url);URL {href:"https://example.com/?foo=1&bar=2", origin: "https://example.com", protocol: "https:", username: "", password: "", …}hash:""host:"example.com"hostname:"example.com"href:"https://example.com/?foo=1&bar=2"origin:"https://example.com"password:""pathname:"/"port:""protocol:"https:"search:"?foo=1&bar=2"searchParams:URLSearchParams {}username:""}/*arrayObject.slice(start,end)返回一个新的数组,包含从start到end(不包括该元素)的 arrayObject 中的元素。
*/
/*去掉?,剩下let params = new URLSearchParams(url.search.slice(1));//添加第二个foo搜索参数。params.append('foo', 4);//查询字符串变成: 'foo=1&bar=2&foo=4'
*///下载功能实现:用iframes,其实就是通过iframes给后台发请求,让后台实现具体下载
import axios from 'axios';
export const baseURL = '/service';
export function getFileName(headers) {//headers['content-disposition']的属性值中的'attachment; filename='用空格代替,拿到file的值return headers['content-disposition'].replace('attachment; filename=', '');
}
export function downloadData(url,params) {//URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串var searchParams = new URLSearchParams();url = baseURL + url;for (let key of Object.keys(params)) {searchParams.append(key, encodeURIComponent(params[key]));}document.querySelector('#downloadIframe').setAttribute('src', url + '?' + searchParams)
}//下载功能的实现:用a.download, 后台返回的 res.data 必须是 blob 对象
export function download(res) {var a = document.createElement('a');//URL.createObjectURL通常都是用来创建图片的DataURI用来显示图片,这里用来下载文件,让浏览器来帮我们设定好文件类型var url = window.URL.createObjectURL(res.data);var filename = getFileName(res.headers);a.href = url;//HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打开链接指向的文件,而是改为下载a.download = filename;a.click();//URL.revokeObjectURL()静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。//当你结束使用某个 URL 对象时,应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。window.URL.revokeObjectURL(url);
}
function filterResponse(res) {if (isDownload(res.headers)) {download(res);}
}
function errorResponse(err) {return Promise.reject(err);
}
httpLayer.interceptors.request.use(filterResponse, errorResponse);header中Content-Disposition的作用与使用方法:Content-disposition 是 MIME 协议的扩展,MIME 协议指示 MIME 用户代理如何显示附加的文件。Content-disposition其实可以控制用户请求所得的内容存为一个文件的时候提供一个默认的文件名,文件直接在浏览器上显示或者在访问时弹出文件下载对话框。
格式说明:
content-disposition = "Content-Disposition" ":" disposition-type *( ";" disposition-parm )
字段说明:
Content-Disposition为属性名
disposition-type是以什么方式下载,如attachment为以附件方式下载
disposition-parm为默认保存时的文件名
服务端向客户端游览器发送文件时,如果是浏览器支持的文件类型,一般会默认使用浏览器打开,比如txt、jpg等,会直接在浏览器中显示,如果需要提示用户保存,就要利用Content-Disposition进行一下处理,关键在于一定要加上attachment:
复制代码 代码如下:
Response.AppendHeader("Content-Disposition","attachment;filename=FileName.txt");
备注:这样浏览器会提示保存还是打开,即使选择打开,也会使用相关联的程序比如记事本打开,而不是IE直接打开了。
Content-Disposition就是当用户想把请求所得的内容存为一个文件的时候提供一个默认的文件名。具体的定义如下:
复制代码 代码如下:
content-disposition = "Content-Disposition" ":"disposition-type *( ";" disposition-parm )
disposition-type = "attachment" | disp-extension-token
disposition-parm = filename-parm | disp-extension-parm
filename-parm = "filename" "=" quoted-string
disp-extension-token = token
disp-extension-parm = token "=" ( token | quoted-string )
那么由上可知具体的例子:
Content-Disposition: attachment; filename="filename.xls"
当然filename参数可以包含路径信息,但User-Agnet会忽略掉这些信息,只会把路径信息的最后一部分做为文件名。
当你在响应类型为application/octet- stream情况下使用了这个头信息的话,那就意味着你不想直接显示内容,
而是弹出一个"文件下载"的对话框,接下来就是由你来决定"打开"还是"保存" 了。
注意事项:
1.当代码里面使用Content-Disposition来确保浏览器弹出下载对话框的时候。 response.addHeader("Content-Disposition","attachment");一定要确保没有做过关于禁止浏览器缓存的操作。如下:
复制代码 代码如下:response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "No-cache");
response.setDateHeader("Expires", 0);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247528.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

V记录2(文档)Vue.extend构造器

1.简单介绍 Vue.extend(options) 参数&#xff1a;对象 用法&#xff1a;使用Vue构造器&#xff0c;创建一个“子类”&#xff0c;参数是一个包含组件选项的对象&#xff0c;其中,data选项中必须是函数 描述&#xff1a;Vue.extend返回的是一个“扩展实例构造器”&#xff0c;也…

在javascript中,如何判断一个被多次encode 的url 已经被decode到原来的格式?

% 而不能被无限次decodeURIComponent 可以用%来进行判断 转载于:https://www.cnblogs.com/zhouyideboke/p/11169705.html

推荐base.css

学习《编写高质量代码--Web前端开发修炼之道》 /* CSS Document */ /*css reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{ border-collapse:collapse;border-spacing:0;} fieldest,i…

如何通过RFID开发来迎接第四次工业革命(转)

我们都经历了革命性的冲击&#xff0c;自上世纪90年代初的互联网冲击了文化和商业&#xff0c;但很少人知道如何完成RFID开发来迎接第四次工业革命&#xff0c;在接下来的二十年里&#xff0c;智能工厂的出现将成为一个重要组成部分。制造业作为我国工业的主体&#xff0c;面临…

对js数组去重的研究

1.利用es5 let arr [1, 2, 3, 4, 5, 6, 7, 1, 2, 3] const uniquearr>{ return Array.from(new Set(arr)) } console.log(unique(arr))2.通过双层循环使用splice删除 let arr [1, 2, 3, 4, 5, 6, 7, 1, 2, 3] const uniquearr>{ // return Array.from(new Se…

一些前端开发经典书籍推荐和下载链接分享

下面的这些书都是我曾看过或了解过的&#xff1a; 一.HTML 1.《HTML5权威指南》 非常全面的书&#xff0c;内容也很新&#xff0c;包含了HTML5CSS3JS DOM。 下载链接&#xff1a;http://pan.baidu.com/s/1qYGn1qW HTML我暂时没看什么书&#xff0c;学会了大部分的标签后我…

RFID图书管理系统程序源代码(转)

RFID图书管理系统程序源代码https://wenku.baidu.com/view/5f4e47f0c9d376eeaeaad1f34693daef5ef713d9.html

UOJ310 黎明前的巧克力 FWT

传送门 我们要求的是\([x^0]\prod\limits_{i1}^n (2x^{a_i}1)\)&#xff0c;其中乘积定义为集合对称差卷积。 这个直接做复杂度太高了&#xff0c;考虑优化。注意到在FWT之后&#xff0c;每一个序列中的值要么是\(3\)&#xff0c;要么是\(-1\)&#xff0c;而且这个只跟\(a_i\)有…

vue调用百度地图API

安装 $ npm install vue-baidu-map --save 全局注册 在main.js 里面引入以下代码 import BaiduMap from vue-baidu-mapVue.use(BaiduMap, {ak: 百度地图密钥AK }) 使用方法 <doc-preview><baidu-map class"map" style"display: flex; flex-direct…

mysql show processlist命令 详解

SHOW PROCESSLIST显示哪些线程正在运行。您也可以使用mysqladmin processlist语句得到此信息。如果您有SUPER权限&#xff0c;您可以看到所有线程。否则&#xff0c;您只能看到您自己的线程&#xff08;也就是&#xff0c;与您正在使用的MySQL账户相关的线程&#xff09;。请参…

JS 数据处理技巧及小算法汇总(转载)

1、根据属性来更新一个数组中的对象 const arr [ {id: 1, score: 1}, {id: 2, score: 2}, {id: 3, score: 4}]; //更新的值 const newValue {id: 3, score: 3} 更新数组中id为3的score值。 Es6 装逼写法如下&#xff1a; const result initial.map(x > x.id newValue.i…

让行内元素(如图片)在div中水平垂直居中 (干货)

&#xff08;1&#xff09;第一种&#xff1a;用vertical-align <div class"method1"><span class"tiptop"></span><img class"test" src"img/Dota2.jpg" alt"dota2"> </div><style> …

对Canvas的研究

1。标签定义图形&#xff0c;比如图表和其他图像&#xff0c;您必须使用脚本来绘制图形。 什么是 canvas? HTML5 <canvas> 元素用于图形的绘制&#xff0c;通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器&#xff0c;您必须使用脚本来绘制图形。 …

Vue中watch的简单应用

Vue.js 有一个方法 watch&#xff0c;它可以用来监测Vue实例上的数据变动。 如果对应一个对象&#xff0c;键是观察表达式&#xff0c;值是对应回调&#xff0c;值也可以是方法名&#xff0c;或者是对象&#xff0c;包含选项。 下面写两个demo&#xff0c;参考demo来了解一下 …

小程序中textarea点击按钮事件

textarea 的 blur 事件会晚于页面上的 tap 事件&#xff0c;如果需要在 button 的点击事件获取 textarea&#xff0c;可以使用 form 的 bindsubmit。 <view class"section"><form bindsubmit"bindFormSubmit"><textarea placeholder"f…

placeholder的兼容处理方法

placeholder是html5新增的一个属性&#xff0c;极大的减轻了表单提示功能的实现&#xff0c;但是对于IE6-IE9真的是只能靠自己写啦&#xff01; 但是在自己写时会掉进了一个坑里&#xff0c;还好用了一会时间还是爬出来啦。 最终的解决方法方法如下&#xff1a; 1 <form nam…

常用数据处理

1、树形数据转换 在处理商品分类数据、企业列表数据等情况下&#xff0c;后台会返回到前台所有的数据。我们需要根据parentId,数据ID将数据转换为树形数据进行渲染。 /*** 树形数据转换* param {*} data* param {*} id* param {*} pid*/ export function treeDataTranslate(d…

运行Xcode时出现 Lazy loading NSBundle MobileCoreServices.framework和 Loaded MobileCoreServices.framework

运行Xcode时出现 Lazy loading NSBundle MobileCoreServices.framework和 Loaded MobileCoreServices.framework 解决方案&#xff1a; 1、打开项目的 Product-->Scheme --> Edit Scheme--> Run-->Arguments-->Environment Variables添加Name为OS_ACTIVITY_MO…

less中的for循环

.loop(count) when (counter > 0) { .loop((counter - 1)); // 递归调用自身width: (10px * counter); // 每次调用时产生的样式代码}转载于:https://www.cnblogs.com/zhouyideboke/p/11178271.html

详解 vue-cli 的打包配置文件代码(转)

一、前言 对于webpack基础不好&#xff0c;node指令不通的童鞋。估计对自己搭建Vue、react脚手架是相当头疼的&#xff0c;有种无从下手的感觉。然而&#xff0c;从头看这2块&#xff0c;耗时太长&#xff0c;而且说实话得练才行&#xff0c;不练练手看不明白。那大多数人就采取…