a标签下载txt,jpg文件,不是直接打开的方式

实现: a标签实现文件下载,是使用的相对路径下载。
js代码

<a class="btn btn-success btn-sm" href="../docs/doc/"  title="下载"  
mce_href="#"><i class="fa fa-arrow-circle-down"></i></a>

这样用户在点击这个链接的时候,就会直接下载这个文件,但是这里有个问题,
像txt,jpg这些浏览器支持直接打开的文件是不会执行下载的,而是会直接打开。
这时候可以给a标签添加一个download属性,例如:

<a class="btn btn-success btn-sm" href="../docs/doc/" download=""  
title="下载"  mce_href="#"><i class="fa fa-arrow-circle-down"></i></a>

  

download不给值,会使用默认的文件名。

该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

参考:http://blog.youkuaiyun.com/fangqun663775/article/details/71159633

欢迎访问:微信公众号(程序员资料站):code_data

在 HTML 中使用 `<a>` 标签下载文件时,可以通过 `download` 属性指定保存的文件名。此功能是 HTML5 的一部分,支持主流浏览器(如 Chrome 和 Firefox)[^1]。 ### 使用方式 基本语法如下: ```html <a href="path/to/your/file" download="desired-filename">下载文件</a> ``` - `href`:指向文件的路径。 - `download`:指定下载后保存的文件名。 例如: ```html <a href="/files/example.pdf" download="报告.pdf">下载PDF</a> ``` 点击链接后,浏览器将下载文件,并建议以“报告.pdf”作为默认文件名保存。 ### 注意事项 1. **同源限制** 如果目标文件与当前页面不在同一域名下(即跨域),则 `download` 属性可能不会生效,浏览器会采用默认行为,即使用 URL 中的文件名进行下载。为了解决这个问题,可以使用 JavaScript 来创建 Blob 并强制下载。 2. **兼容性问题** 虽然大多数现代浏览器都支持 `download` 属性,但某些旧版本或非主流浏览器(如 IE)可能不支持该特性。 3. **动态生成下载链接** 对于跨域资源,可以借助 `XMLHttpRequest` 或 `fetch` 获取数据并转换为 Blob,然后通过动态创建 `<a>` 标签来实现自定义文件名的下载。 示例代码如下: ```javascript function downloadFile(fileUrl, fileName) { var xhr = new XMLHttpRequest(); xhr.open("GET", fileUrl, true); xhr.responseType = "blob"; xhr.onload = function (e) { var blob = new Blob([e.target.response]); var url = window.URL.createObjectURL(blob); var a = document.createElement("a"); a.href = url; a.download = fileName; a.click(); window.URL.revokeObjectURL(url); }; xhr.send(); } ``` 调用函数: ```html <a onclick="downloadFile('https://example.com/files/report.pdf', '年度报告.pdf')">下载文件</a> ``` 这样即使文件来自不同域名,也能正确设置下载时的文件名。 ### 文件类型控制 浏览器通常通过响应头中的 `Content-Type` 字段识别文件类型,并决定如何处理。如果希望避免浏览器直接预览文件(如 PDF 或图片),服务器端应设置如下响应头: ``` Content-Disposition: attachment; filename="filename.jpg" ``` 其中 `attachment` 表示强制下载,而不是在浏览器中打开;`filename` 则指定了默认的文件名 [^3]。 ### 总结 - 使用 `download` 属性可以直接指定下载文件的名称。 - 若遇到跨域问题,可通过 Blob 和 JavaScript 动态创建 `<a>` 标签解决。 - 后端配合设置 `Content-Disposition` 响应头可进一步确保下载行为符合预期。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值