在浏览器端用JS创建和下载文件

前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑.在线代码编辑.iPresst等). 但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开->另存为.如下面这个链接: <a href=”file.js”>file.js</a> 用户点击这个链接的时候,浏览器会打开并显示链接指向的文件内容,显然,这并没有实现我们的需求. HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在…

js创建并下载文件

先上代码: function createAndDownloadFile(fileName, content) { var aTag = document.createElement('a'); var blob = new Blob([content]); aTag.download = fileName; aTag.href = URL.createObjectURL(blob); aTag.click(); // 模拟点击 URL.revokeObjectURL(blob); } file…

IE浏览器下用JS创建文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

[转] 使用 JavaScript 创建并下载文件

[From] https://gaohaoyang.github.io/2016/11/22/js-create-file-and-download/ 本文将介绍如何使用 JavaScript 创建文件,并自动/手动将文件下载.这在导出原始数据时会比较方便. 先上代码 /** * 创建并下载文件 * @param {String} fileName 文件名 * @param {String} content 文件内容 */ function createAndDownloadFile(fileN…

使用 JavaScript 创建并下载文件

先上代码 Blob 对象 Blob URLs 模拟 click 小结参考本文将介绍如何使用 JavaScript 创建文件,并自动/手动将文件下载.这在导出原始数据时会比较方便. 先上代码 /** * 创建并下载文件 * @param {String} fileName 文件名 * @param {String} content 文件内容 */ function createAndDownloadFile(fileName, content) { var aTag = document.cr…

浏览器端用JS实现创建和下载图片

问题场景在前端很多的项目中,文件下载的需求很常见.尤其是通过JS生成文件内容,然后通过浏览器端执行下载的操作.如图片,Execl 等的导出功能.日前,项目中就遇到了这类需求,在浏览器端实现保存当前网页为图片,然后还可以下载. 解决方案网页生成图片这里可以采用 html2canvas 来实现.并且可以兼容大部分主流的浏览器. Firefox 3.5+ Google Chrome Opera 12+ IE9+ Safari 6+ 文件下载第一种方案 HTML5 新增了 download 属性…

js之Ajax下载文件

传统上,客户端将依靠浏览器来处理从服务器下载文件.然而,这种方法需要打开一个新的浏览器窗口,iframe或任何其他类型的不友好和黑客行为.为下载请求添加额外的头信息也很困难.更好的解决方案是使用HTML5 File API以及XMLHttpRequest或请求库. File API允许您在浏览器中创建,加载和操作文件.我们可以使用a Blob 创建一个内存文件: const blob = new Blob(['lorem ipsum'],{type:'text / plain'}); 通过一些额…

浏览器页面请求js、css大文件处理

当页面引用一个比较大的js和css文件时,会出现较大下载延迟,占用带宽的问题,如果一个应用里有很多这样的js或CSS文件,那么就需要优化了. 比如ext-all.js有1.4M,页面引用这个文件,正常引用如下: <script type="text/javascript" charset="utf-8" src="/extjs/ext-all.js"></script> HTTP中响应头(Response Headers)…

js实现前端下载文件

在前端下载文本格式的文件时,可采用下面的方式: (1)创建基于文件内容的Blob对象: (2)通过URL上的createObjectURL方法,将blob对象转换成一个能被浏览器解析的文件地址. (3)将上述的文件地址指向a标签的href,并设置a标签的download属性为要保存成的文件名. (4)点击a标签,即可下载对应的文件. //下载文件 _download:function (filename,content){ var blob = new Blob([content], {type…

浏览器兼容性--IE11以及Edge等下载文件的中文名出现乱码，前后端解决方案

项目中有用到文件下载功能,之前在处理下载时对IE浏览器下文件下载名进行过处理,测试也没有问题,但是功能上线后,业务反馈IE11文件下载文件名依然乱码.打印User-Agent字符串如下: IE11 User-Agent字符串:Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like GeckoIE6~IE10版本的User-Agent字符串:Mozilla/5.0 (compatible; MSIE 10.0; Windows…

js从服务器下载文件

通常,将文件绝对路径url作为超链接<a>的链接地址href的值,点击<a>后,浏览器将会尝试请求文件资源,如果浏览器能够辨认文件类型,则将会以预设的打开方式直接打开下载的文件.(关于预设的文件打开方式,windows -> 控制面板 -> Internet属性 -> 程序 -> 设置程序 -> 将文件类型或协议与程序关联) 不过,这里有一个弊端,通常,文件如果没有默认的打开文件方式,将会被标注为未知应用程序,不过如果你设置了该文件的打开方式一次之后,…

jquery.form.js ie 下下载文件已经ie8失效问题解决方案

https://github.com/malsup/form/blob/master/jquery.form.js在使用这个插件时遇到的问题1.ie下会变成下载文件,解决方案是在后端返回时设置'Content-Type': 'text/html'2.ie8下失效问题,解决方案是给form添加属性method="post"…

js通过 URL下载文件

页面上一个button,点击之后触发一个function去请求数据,返回 pdf/epub 的URL,然后下载这个文件. 本来是直接用 a 写的,href里放资源地址,target设为'_blank'效果良好.但这样所有的资源都会直接暴露而且不方便统计,所以就换用上面的方式. js构造a标签,js触发click.不加_blank是可以的,但会替换掉原来整个页面.加了_blank chrome就拦截,Safari无效果. 用iframe,src填入资源地址. 但这样Safari无效果. 且,如果是…

js 点击下载文件

下载的文件类型如果浏览器不能打开会直接下载,能打开的需要后台在响应头部进行设定. Content-disposition 是 MIME 协议的扩展,MIME 协议指示 MIME 用户代理如何显示附加的文件.Content-disposition其实可以控制用户请求所得的内容存为一个文件的时候提供一个默认的文件名,文件直接在浏览器上显示或者在访问时弹出文件下载对话框. Response.AppendHeader("Content-Disposition","attachment…

[转] 如何在ie11里使用a连接创建动态下载文件流

[From] https://segmentfault.com/q/1010000009470664 查了资料,可以使用微软独家的msSaveBlob, 这个方法支持ie10及以上. var downloadFileName = self.formatTimestamp()+ '-' + self.logFilename; if(window.navigator.msSaveBlob){ // for ie 10 and later try{ var blobObject = new Blob(…

js页面(页面上无服务端控件，且页面不刷新)实现请求一般处理程序下载文件方法

对于js页面来说,未使用服务端控件,点击下载按钮时不会触发服务端事件,且不会提交数据到服务端页面后台进行数据处理,所以要下载文件比较困难.且使用jQ的post来请求一般处理程序也不能实现文件的下载,根本不会弹出提示用户保存文件的对话框.但会将文件数据获取到. 要解决一般处理程序下载文件的办法,其实很简单,只要明白b/s基本基本原理即可.采用方法为创建一个iframe,并隐藏,设置其src=demo.handler.ashx 即可,在服务端将要下载的文件输出即可.注意设置content-type和…

Js点击按钮下载文件到本地（兼容多浏览器）

实现点击用纯 js(非jquery) 下载文件到本地自己尝试,加网上找了好久未果,如: window.open(url) location.href=url form表单提交 iframe 体验和浏览器兼容都不完美还是博客园一兄弟给了方法,非常感谢! window.downloadFile = function (sUrl) { //iOS devices do not support downloading. We have to inform user about th…

[转]用JavaScript在浏览器中创建下载文件

前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑.在线代码编辑.iPresst等. 但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开->另存为.如下面这个链接: <a href=”file.js”>file.js</a> 用户点击这个链接的时候,浏览器会打开并显示链接指向的文件内容,显然,这并没有实现我们的需求. HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打…

js IndexedDB：浏览器端数据库的demo实例

IndexedDB具有以下特点. (1)键值对储存. IndexedDB内部采用对象仓库(object store)存放数据.所有类型的数据都可以直接存入,包括JavaScript对象.在对象仓库中,数据以“键值对”的形式保存,每一个数据都有对应的键名,键名是独一无二的,不能有重复,否则会抛出一个错误. (2)异步. IndexedDB操作时不会锁死浏览器,用户依然可以进行其他操作,这与localStorage形成对比,后者的操作是同步的.异步设计是为了防止大量数据的读写,拖慢网页的表现. (3…

JS神经网络deeplearn.js:浏览器端机器智能框架

JS神经网络deeplearn.js:浏览器端机器智能框架通过 deeplearn.js,可以实现在浏览器中训练神经网络模型,也可在推理阶段运行预训练模型. deeplearn.js 以 TypeScript 作为首选语言,提供了可用于构建可微数据流图的 API,以及一系列可以直接使用的数学函数.该库有两个 API 模型,一个是即时执行模型(可认为是 NumPy),另一个是基于 TensorFlow 的 API 镜像的延时执行模型.该库还支持从 TensorFlow 检查点将权重转储为可以导入…

浏览器端JS导出EXCEL

浏览器端JS导出EXCEL FileSaver.js 实现了在本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器支持文件保存.FileSaver.js 在客户端保存文件的解决方案,并且可以让 Web 应用完美的生成文件, 或者保存不应该发送到外部服务器的一些敏感信息.是一种简单易用实现的利用 JavaScript/JS 在浏览器端保存文件的方案. 实现浏览器端生成并保存文件的 JavaScript 库 FileSaver.js 使用说明: 一.引入 JavaScr…

如何让Node.js运行在浏览器端

Node.js又称服务端JavaScript.今天我为了解决一个问题,通过搜索引擎找到了如何将Node.js转成浏览器端可以运行的javascript.尽管这种方式有其局限性,但是还是可以用的. 1.安装库 npm install -g browserify 2.转换 browserify test.js > index.js 或 browserify test > index.js 或 browserify test.js -o index.js 以上三种方式均可行参考资料:如何让node…

Js下载文件到本地（兼容多浏览器）

在客户端通过js下载文件,试过几种下载方式,iframe方式仅限于IE浏览器,window.open(url),location.href=url 这两种方式在chrome浏览器还会是直接打开文件而不是下载,百度N久没有结果,在谷歌还是找到答案了,下载链接在此. window.downloadFile = function (sUrl) { //iOS devices do not support downloading. We have to inform user about this. i…

js使用浏览器的另存为下载文件

页面上的页面如下: 我需要根据返回的url下载文件: js: //判断浏览器类型 function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; if (isOpera) { return "Opera" }; //判断是否Opera浏览器 if (userAgent.in…

js接收对象类型数组的服务端、浏览器端实现

1.服务端 JSONArray jsonArr = JSONUtil.generateObjList(objList); public static generateObjList(List<Obj> objList ){ JSONArray resultArray = new JSONArray(); for (Role role : objList) { JSONObject jsonObj = new JSONObject(); jsonObj.put("id", r…

使用 iosOverlay.js 创建 iOS 风格的提示和通知

iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼容:IE7+, Google Chrome, Firefox, Opera, Desktop Safari, Mobile Safari — iPhone & iPad. 您可能感兴趣的相关文章特别推荐:10套精美的免费网站后台管理系统模板 SlimerJS – Web开发人员可编写 JS 控制的…

angulaijs中的ng-upload-file与阿里云oss服务的结合，实现在浏览器端上传文件到阿里云（速度可以达到1.5M）

2015-10-26 angularjs结合aliyun浏览器端oos文件上传加临时身份验证例子在服务端获取sts 源码: public class StsServiceSample { // 目前只有"cn-hangzhou"这个region可用, 不要使用填写其他region的值 //<setting name="accessKeyId" value="H6JSh0Y****z2cGa" /> //<setting nam…

Vue服务端渲染和Vue浏览器端渲染的性能对比

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D…

关于Ajax无法下载文件到浏览器本地的问题

最近在做网站的时候遇到这样一个功能,在如图所示的页面中,需要用户点击链接的时候,能够以异步Ajax的方式判断服务器中是否存储有相应的Excel文件,如果没有的话就提示用户没有找到,如果有的话就下载到用户本地. 当然,这是很简单的一个问题,按照一般方式编写Ajax就可以了.但是当服务器端把文件内容以二进制的形式返回到浏览器端,浏览器的Ajax却抛出了错误.大致是ParseError, Invalid XML PK一类的错误信息. 造成这个问题的原因,并不是服务器端代码或者javascrip…

浏览器端Less

摘要: 之前项目用过Less,现在负责的项目也要使用,所以就总结下Less,也方便以后查看.本文主要是讲浏览器端如何使用Less. 简介: LESS是一种由Alexis Sellier设计的动态层叠样式表语言.LESS 是开源的,其第一个版本由Ruby写成,但在后续的版本当中,Ruby逐渐被替换为JavaScript.受益于JavaScript,LESS可以在客户端上运行(IE6+.Webkit.Firefox),也可以在服务端运行(Node.js.Rhino). 本质上,LESS 包含一套自定…

【在浏览器端用JS创建和下载文件】的更多相关文章