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

使用h5 标签 href=url download 下载踩过的坑

用户点击下载多媒体文件(图片/视频等),最简单的方式: 下载 如果url指向同源资源,是正常的。...如果url指向第三方资源,download会失效,表现和不使用download时一致——浏览器能打开的文件,浏览器会直接打开,不能打开的文件,会直接下载。浏览器打开的文件,可以手动下载。...解决方案一:将文件打包为.zip/.rar等浏览器不能打开的文件下载。 解决方案二:通过后端转发,后端请求第三方资源,返回给前端,前端使用file-saver等工具保存文件。...如果url指向的第三方资源配置了CORS,download依然无效,但可以通过xhr请求获取文件,然后下载到本地。...([data]); var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a') save_link.href

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

    【HTML】HTML 表单 ③ ( label 标签 | 增大表单触发面积 | label 标签包含表单 | 通过 label 标签的 for 属性控制触发表单 )

    文章目录 一、label 标签 1、label 标签包含表单 ( 增大表单触发面积 ) 2、通过 label 标签的 for 属性控制触发表单 ( 增大表单触发面积 ) 一、label 标签 ---...> 标签可以 直接包含 表单 和 相关文字信息 , 点击 label 标签的范围 , 就可以触发 表单 的操作 , 如 : 文本框 触发 光标输入 , 复选框 触发 选中效果 , 按钮...触发 点击效果 ; 默认情况下的 文本框 , 只有选中 文本框本身 , 才能触发输入 ; 将 文本 和 文本框表单 都放在 标签中 , 点击 整个 label 标签 ,...: 2、通过 label 标签的 for 属性控制触发表单 ( 增大表单触发面积 ) 如果 label 标签 不方便将 表单 包裹起来 , 可以使用如下方案 增加 表达触发面积 : label 标签中..., 使用 for 属性 , 属性值为 表单的 id 属性值 ; 表单标签中 , 使用 id 属性 将表单进行标记 , 方便在 label 标签关联表单标签 ; 用户名

    1.8K30

    HTML的a标签href属性指定相对路径与绝对路径的用法讲解

    .htm 那么:1.htm相对于2.htm的路径就是:1.htm 相对链接的使用方法: 如果链接到同一目录下,则只需输入要链接文档的名称,例如: XML/HTML Code复制内容到剪贴板 如果链接到下一级目录,则需要先输入目录名,然后加 “ / ”,再输入文件名,例如: XML/HTML Code复制内容到剪贴板 <a href...index.html的路径为D:/www/ index.html 1.链接同一目录下的文件 例如ccc.html文件链接index.html的代码如下: XML/HTML Code复制内容到剪贴板 链接index网页 2.链接上一目录的文件 例如bbb.html链接ccc.html的代码如下: XML/HTML Code复制内容到剪贴板 链接ccc网页 3.链接上2层目录的文件 例如aaa.html链接ccc.html的代码如下: XML/HTML Code复制内容到剪贴板 <a href=”../

    1.4K20

    前端文件下载汇总「案例讲解」

    node index.js 开启服务后,整个页面渲染如下。 我们触发下 Download File: test.txt 超链接,test.txt 被下载。...是的,下载的文件名为 text.txt,我们在设定 a 标签的时候,使用了 download 属性并设定了值 file.txt。触发 a 标签,浏览器会自动下载文件。...我们触发下 Download File 超链接。可以吊起浏览器下载文件。那么,我们可以更改文件名下载? 我们来添加 download 属性值为 download='custom': <!...小结 本小节演示了通过 a 标签元素的方法来下载超链接文件。介绍了通过 纯 HTML 中 a 标签 和 通过 JS 构建 a 标签 来获取文件的方式。...它们有些异同: 同源和跨域下,都可以使用 a 标签对超链接文件进行预览或者下载 同源下,超链接文件可以通过 a 标签 download 属性值更改下载文件名;跨域下,超链接文件不能被更改文件名 超链接文件

    22410

    【前端面试专栏】script脚本以及link标签对DOM的影响

    \== 问: script标签总是会触发Paint吗? 回答: script标签时,会触发一次Paint,浏览器会将script标签之前的元素渲染出来。...但也并不是所有的script标签都会触发Paint。 head中的script标签是不会触发的,毕竟此时body还没有解析,触发Paint也看不到任何内容。...defer属性的script标签时,则脚本的下载则在后台运行,下载不会阻止DOM解析渲染 多个defer属性的script标签,则在后台并行下载 脚本的执行需要等到页面解析完成才能进行 当页面解析渲染完毕后...3、async 文档解析时,当遇到有async属性的script标签时,则脚本的下载则在后台运行,下载不会阻止DOM解析渲染 多个async属性的script标签,则在后台同时并行下载 async脚本的执行会阻止页面的解析渲染...CSS资源时阻止了页面渲染 2、link标签会阻塞JS执行 JS运行时,有可能会请求样式信息,如果此时还没有加载和解析样式,js就有可能会得到错误的回复,产生很多问题。

    16410

    <script> 脚本以及 <link> 标签对 DOM 解析渲染的影响

    == 问: script标签总是会触发Paint吗? 回答: script标签时,会触发一次Paint,浏览器会将script标签之前的元素渲染出来。...但也并不是所有的script标签都会触发Paint。head中的script标签是不会触发的,毕竟此时body还没有解析,触发Paint也看不到任何内容。...script脚本和页面解析渲染完, 才会依此触发DOMContentLoaded、 loaded事件2、defer,文档执行时,当遇到有defer属性的script标签时,则脚本的下载则在后台运行,下载不会阻止...DOM解析渲染多个defer属性的script标签,则在后台并行下载脚本的执行需要等到页面解析完成才能进行当页面解析渲染完毕后, 会等到所有的defer脚本下载完毕并按照顺序执行,执行完毕后会触发DOMContentLoaded...3、async文档解析时,当遇到有async属性的script标签时,则脚本的下载则在后台运行,下载不会阻止DOM解析渲染多个async属性的script标签,则在后台同时并行下载async脚本的执行会阻止页面的解析渲染遵循先下载完先执行

    50411

    VUE2.0 学习(一)HTML单页面使用vue技术

    目录 先下载vue.js 入门全局配置 浏览器控制台报错 指令语法 v-bind v-model v-on data的两种写法 MVVM 事件修饰符 prevent修饰符 stop 修饰符 once...修饰符 capture 修饰符 self 修饰符 passive修饰符 事件修饰符可以连写 先下载vue.js 将开发版本 和 生产版本都下载 入门全局配置 html 页面引入vue.js 之后...href属性,现在我们给这个a标签一个点击属性,具体写法是 本来这个a标签是自己有一个本来的链接,又给了人家一个click的点击事件,现在我们想要的情况是点击之后,只是执行click的点击事件,不要执行...点击了a标签一定也点击了div。所以两个事件都会触发。。...现在我们想点击了A标签,只是触发a标签上面的事件,div上面的事件不触发,也就是防止事件向上的冒泡,我们之前是在a事件方法里面写 现在我们使用了vue的click的点击事件,那么他有一个修饰符stop

    1.5K21

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

    Email: sunjianfeng@csxiaoyao.com QQ: 1724338257 目录导航 浏览器端用JS创建和下载文件 1 需求 2 解决方案 2.1 下载取代加载...:H5标签属性 2.2 生成文件:DataURI 3 改进方案 1 需求 前端需要把获取的数据生成文件让用户下载,按照以往生成 a 标签 href 指向目的文件,不仅需要有已经生成的文件服务器路径...,而且很多浏览器支持类型的文件会默认加载而不提示用户选择路径下载 2 解决方案 2.1 下载取代加载:H5标签属性 HTML5 中 a 标签增加了 download 属性,点击链接时浏览器不会打开链接指向的文件...:text/plain," + content; } 调用 downloadFile 后,用户点击链接触发浏览器下载 3 改进方案 进一步放宽条件 取消下载类型限制 取消点击过程,直接下载 解决文件类型的问题...:禅林阆苑 » 浏览器端用JS创建和下载文件 【原创】

    2.3K70

    浏览器端用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...:用 content 创建 ObjectURL 并赋值给 aLink 即可解决文件类型的限制 文件自动下载:构建UI点击事件,再自动触发 function downloadFile(fileName,

    4.7K120

    如何用 JavaScript 下载文件

    幸好,HTML 5 里面为 标签添加了一个 download 的属性,我们可以轻易的利用它来实现下载功能,再也不需要用以前的笨办法了。...">Download file 看看上面的代码,只要为 标签添加 download 属性,我们点击这个链接的时候就会自动下载文件了...href 属性 3.设置它的 download 属性 4.用 JavaScript 来触发这个它的 click 事件 翻译成 JavaScript 代码就是: var a =...只是用 blob 对象来创建一条 URL,然后让 标签引用该 URL,然后触发个点击事件,就可以下载文件了! 那么问题来了,blob 对象哪里来?...然而事实上下载的的确确发生了,只是要等到下载完文件之后才能构建 blob 对象,再转化成文件。而且,用户再触发多几次下载就会造成一些资源上的浪费。

    1.6K20

    让浏览器下载文件的一些手段

    download 属性介绍 常规的标签通过 href 实现链接跳转,如果只想下载文件而不是跳转预览,最好的方式是在标签中添加download属性,就能很简单地实现下载操作。...download是 HTML5 中标签新增的一个属性,此属性会强制触发下载操作,指示浏览器下载 URL 而不是导航到它,并提示用户将其保存为本地文件,例如: <a href="result.png...为了能够满足不同的 URL 下载,可以通过JS 实现一个动态触发 URL 下载的方法。...文件命名问题 download属性不仅可以触发下载,也能指定下载文件名: 下载 如果下载文件的后缀与源文件保持一致...,可以设置缺省文件名: 下载 笔者曾遇到过一个问题,通过标签触发跨域资源下载,代码与上述的 download 方法基本相同

    9.4K20
    领券