首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

浏览器端用JS创建和下载文件 1 需求 前端需要把获取的数据生成文件让用户下载,按照以往生成 a 标签 href 指向目的文件,不仅需要有已经生成的文件服务器路径,而且很多浏览器支持类型的文件会默认加载而不提示用户选择路径下载...2 解决方案 2.1 下载取代加载:H5标签属性 HTML5 中 a 标签增加了 download 属性,点击链接时浏览器不会打开链接指向的文件,而是改为下载(目前只有chrome、firefox和opera...支持),下载时会直接使用链接的名字来作为文件名(可给 download 加上文件名进行修改,如: download=“file.js”) 2.2 生成文件:DataURI 用js将内容生成文件可以仿照图片...3 改进方案 进一步放宽条件 取消下载类型限制 取消点击过程,直接下载 解决文件类型的问题,可用浏览器新API(URL.createObjectURL)来解决,URL.createObjectURL...通常用来创建图片 DataURI 显示图片,这里用来下载文件,参数是 File对象(通过input[type=file]选择的文件)或 Blob 对象(二进制大对象),让浏览器自动设定文件类型 解决类型限制

4.8K120
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    浏览器端用JS创建和下载文件 【原创】

    浏览器端用JS创建和下载文件 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian...Email: sunjianfeng@csxiaoyao.com QQ: 1724338257 目录导航 浏览器端用JS创建和下载文件 1 需求 2 解决方案 2.1 下载取代加载...,而且很多浏览器支持类型的文件会默认加载而不提示用户选择路径下载 2 解决方案 2.1 下载取代加载:H5标签属性 HTML5 中 a 标签增加了 download 属性,点击链接时浏览器不会打开链接指向的文件...,而是改为下载(目前只有chrome、firefox和opera支持),下载时会直接使用链接的名字来作为文件名(可给 download 加上文件名进行修改,如: download=“file.js”)...【By CS逍遥剑仙】 未经允许不得转载:禅林阆苑 » 浏览器端用JS创建和下载文件 【原创】

    2.3K70

    屏蔽浏览器对网页JS脚本错误提示

    网页脚本基本已经成了现在网站开发中不可或缺的元素,无论是使用JS:Javascript还是使用其他JS库: jquery,extjs等等。但是网页脚本也跟Html/CSS一样也会有一些兼容性问题。...虽然如Jquery这些JS库对浏览器的 兼容性已经表现的相当好,但是也挡不住一些人为的因素,大家都懂的。。。 其实遇到bug因该是努力去解决的,而不是屏蔽掉。...但是有些时候,为了一个不影响效果,又难以排出的脚本错误 屏蔽浏览器脚本错误提示貌似是相对更合理的一种解决办法。...text/javascript"> window.onerror = function () { return true;} 但是经过测试支持window.onerror事件的浏览器有...//e是一个局部变量,用来指向Error对象或者其他抛出的对象 //不想进行错误提示就不做操作 } finally { //无论try中代码是否有异常抛出

    7.7K10

    盘点4大下载神器,教你分分钟搞定文件下载(电脑版、手机版、浏览器插件)

    下载文件还是有些小吃力?...这里就给大家继续找了几个插件,一起来盘点一下吧~ idm多个版本下载地址(电脑、手机浏览器插件都有):www.yijiaup.com/baidu-tiaozhuan/0001.html?...说得这么牛逼我们来下载个试试看,地址: 关注程序员软件库,后台回复"032321"即可获取 这里小编分享的是一个msi的安装包,点击后就能直接安装好,第一次启动会显示英文界面,如图: 这里下面提示我们软件有更新...五、XDown 一款专业的文件下载与分享工具,支持浏览器(Chrome/FireFox/Edge )下载,torrent下载文件与做种,BitTorrent 内置tracker list设置,FTP/HTTP...我们可以看到,速度比较慢,不过比360浏览器还是稍微快一点,可以说是这几款工具中表现最差的了,不过它也有它的过人之处,就是用它来下载种子文件还是很方便的,这点是其它几个工具比不了的。

    3.1K20

    最强下载神器idm下载器(电脑版、手机版、浏览器插件)

    Internet Download Manager(以下简称IDM)idm多个版本下载地址(电脑、手机浏览器插件都有):www.yijiaup.com/baidu-tiaozhuan/0001.html...与传统的下载工具或者是浏览器自带的原生态下载相比,IDM是多线程下载。我见过一个恰当的比喻说明多线程下载的优点。传统下载是用一个水龙头来放泳池里的水,多线程就是用多个水龙头来放。...一般安装完IDM以后,你在浏览器插件是可以看到IDM图标的,如图。如果没有的话,可以自己扩展商店下载一个idm插件。例如扩展迷(https://www.extfans.com/)里就可以下载。...1 设置线程;IDM最大提供32线程下载,但并不是越大越好,一般我们设置成24线程就行了,设置方法见下图;2 下载文件的保存位置;IDM默认文件下载位置在C盘,为了避免C盘变红,需要自己手动设置一下文件保存位置...具体做法我也在这里简单写一下1 去脚本网站下载【网盘助手】这个脚本;2 安装好以后,打开网页版百度网盘,勾选你要下载文件(只能单文件文件夹不行),会在上方显示【生成链接】,右键生成的链接,就可以调用

    6.9K10

    js实现使用文件下载csv文件

    现在我们开始来理解下Bolb对象及它的文件下载应用场景。 1....理解HTML5中a标签的download属性 HTMl5中给a标签新增了一个download属性,只要我们设置该属性值,那么点击该链接时浏览器不会打开新链接,而是会直接下载文件,并且文件名就是 download...因此结合这个特点,我们就可以简单的实现文件下载文件了,我们首先在原来的代码基础之上,再动态创建一个a链接,然后把该a标签的样式设置none, 该链接的 href属性 就是我们上面是有 window.URL.createObjectURL...(blob); 生成的url,然后我们把 a链接的download属性设置下,该属性值就是我们的下载文件文件名。...console.log(blob); const url3 = window.URL.createObjectURL(blob); console.log(url3); var filename = '文件下载

    5.7K30

    前端文件下载浏览器嗅探

    最近要做个下载文件的功能,当后端说做好了给我接口的时候,我直接拼上参数然后window.open(url)之后,浏览器为什么没有像从前一样下载啊?...将主要知识点总结如下: 浏览器如何对文件进行嗅探的? content-type相关 当浏览器访问某个地址后,会对返回结果头中的content-type的进行检查。...格式:type/subType 下面是几种比较常见的类型: text/plain 文本文件默认值。浏览器可以直接展示。 application/octet-stream 程序文件的默认值。...浏览器一般不会自动执行或询问执行,消息体会被下载到本地。 text/css :在网页中要被解析为 CSS 的任何 CSS 文件必须指定 MIME 为text/css。...content-type才能让浏览器识别文件

    94330

    苹果手机下载文件在哪里?

    正常的方式是在电脑登陆电脑版微信,然后手机上转发到“文件传输助手”,电脑上就可以收到,然后重新下载。------不过这里有两个小障碍,如果这时候没有外网怎么办?如果网速很慢怎么办?...如果是非规范的文件,比如是压缩包,那就只能借助第三方的一些程序,比如某些云端存储的苹果手机app,能支持iTunes传输就更好了,从而转折一下传输到电脑。...假设查到的手机地址是192.168.1.100,使用ssh链接到手机: ssh root@192.168.1.100 输入密码登陆手机,随后,你就到了苹果手机里面了。...先介绍几个常用的路径: #系统应用文件夹,比如内置的浏览器、电话应用、联系等,这个路径跟macos是完全相同的: /Applications #用户安装的应用程序,甭管正常的AppStore下载、企业自主分发的应用还是开发版测试应用...,都在这个文件夹: /var/containers/Bundle/Application/ #用户应用产生的数据: /var/mobile/Containers/ 找微信下载文件,当然到应用数据的存储目录中

    2.3K90

    js使用文件下载csv文件的实现方法

    现在我们开始来理解下Bolb对象及它的文件下载应用场景,话不多说了,来一起看看详细的介绍吧 创建Blob对象方式如下: ```var blob = new Blob(dataArray, options...2c75a56e-0104-4572-bc19-391d3bf93d9d 理解HTML5中a标签的download属性 HTMl5中给a标签新增了一个download属性,只要我们设置该属性值,那么点击该链接时浏览器不会打开新链接...,而是会直接下载文件,并且文件名就是 download 的属性值。...因此结合这个特点,我们就可以简单的实现文件下载文件了,我们首先在原来的代码基础之上,再动态创建一个a链接,然后把该a标签的样式设置none, 该链接的 href属性 就是我们上面是有 window.URL.createObjectURL...(blob); 生成的url,然后我们把 a链接的download属性设置下,该属性值就是我们的下载文件文件名。

    5.5K10

    IDM下载神器IDM多个版本(电脑、手机浏览器插件都有)

    1软件介绍IDM 是一款电脑端的下载工具,IDM 是axing哥最喜爱的 Windows 电脑下载工具之一。...idm多个版本下载地址(电脑、手机浏览器插件都有):www.yijiaup.com/baidu-tiaozhuan/zefen/0001.html?...PS:我们将2、火狐里面安装IDM插件打开火狐浏览器,然后点击附件组件管理器,然后把IDM文件夹下的文件idmmzcc3.xpi拖到浏览器中即可。然后在扩展里面我们可以看出来已经安装成功。...(1)打开谷歌浏览器,找到更多工具-扩展程序(2)将IDMGCExt.crx文件拉到扩展程序里面即可。...(如果没有自己加载就按照我前面说的将文件拖到谷歌里面去)4、QQ浏览器里面安装IDM插件。打开浏览器找到应用中心-管理我的应用,然后启动IDM即可。

    1.9K40

    Blazor 中如何下载文件浏览器

    Blazor 中如何下载文件浏览器 目录 一、前言 二、方法一(导航跳转) 三、方法二(下载后传出) (一) 使用 RestSharp 下载 (二) 使用 BlazorDownloadFile 传出...这个实际上不是本文讨论的重点,本文讨论的是,使用代替了 JS 代码的 C# 代码来下载文件浏览器。 三、方法二(下载后传出) 那么如何实现呢?...这个要分两步走,第一步是使用代码调用 API 进行下载文件,第二步是使用某种方法把文件通过浏览器传出给用户。...翻译: 在 Blazor 中通过 C#(不使用任何 JS 库和依赖)下载文件浏览器。 BlazorDownloadFile 是在客户端保存文件的解决方案,它对于在客户端生成文件的应用来说是完美的。...然而如果文件是来自服务端,我们建议您优先使用 Content-Disposition 附件响应头,因为它有更好的跨浏览器兼容性。

    2.5K10
    领券