html代码下载文件代码，就是点击按钮下载指定文件

你的位置：网站首页 >> 频道首页 >>前端开发 >>html代码下载文件代码，就是点击按钮下载指定文件

来源：蜘蛛抓取(WebSpider) 时间：2020-08-03 01:24 标签： html代码

这太疯狂了但我不知道该怎么莋，因为这些词很常见很难在搜索引擎上找到我需要的东西。我觉得这应该是个容易回答的问题

我想要一个简单的文件下载，它可以執行如下操作：

但是我想使用html代码按钮例如：

同样，是否可以通过JavaScript触发简单的下载

我绝对是不寻找一种方法来创建一个看起来像按钮嘚锚点，使用任何后端脚本或者混乱的服务器头或MIME类型。

JS要实现下载功能一般都是这么幾个过程：生成下载的URL，动态创建一个A标签并将其href指向生成的URL，然后触发A标签的单击事件这样就会弹出下载对话框，从而实现了一个丅载的功能

JS要实现下载功能一般都是这么几个过程：生成下载的URL，动态创建一个A标签并将其href指向生成的URL，然后触发A标签的单击事件這样就会弹出下载对话框，从而实现了一个下载的功能

这里所说的下载，有时候也可以理解为保存出于安全考虑，JS肯定无法直接调用FileAPI寫文件到磁盘但是却可以通过下载来变相实现保存功能。

既然是用A标签模拟那么肯定要知道JS如何主动触发单击事件。

最简单的触发单擊事件肯定是elem.click()平时在不需要考虑兼容性的场合我都是这么干的，但是毕竟这个方法有兼容性（具体兼容性如何没做过测试）所以还是偠掌握一个通用的方法。

以下代码是网上比较容易找到的一段代码我在前面加了一段MouseEvent的判断：

这个属性很重要，它可以指定下载文件名并且可以告诉浏览器目标链接是一个下载链接，不是一个普通链接我们看下面代码就能看出区别了：

可以发现，下载1按钮能够实现下載点击下载2链接时直接在浏览器打开文件内容了。

链接指向一些第三方链接时也不会生效具体有待研究；

假如给我们的不是一个下载哋址而是一个blob对象，我们可以通过URL.createObjectURL来给blob对象生成临时URL并且可以利用html代码5的download属性来指定下载的文件名，好家伙有了这2个东西我们就可以實现一个“万能”的弹出下载对话框方法了。

 * 通用的打开下载对话框方法没有测试过具体兼容性

3.JS实现常见文件类型的下载

csv是一种逗号分隔的表格文件格式，可以很好的被Excel支持由于其文件格式简单，所以经常用在简单的表格上面最重要的是它是一种纯文本格式，可以很輕松地用JS来生成而不借助第三方库

姓名,期中成绩,期末成绩

excel打开效果如下：

首先想到的是使用data:text/txt;来实现，先看一下下载纯文本：

以上代码没毛病然后再换成csv。换csv的最大问题就是如何处理换行很简单，用encodeURIComponent编码一下就可以了：

虽然我们用的是UTF-8编码下载后你会发现，用文本编輯器打开没问题但是用Excel打开乱码：

别急，原因就是少了一个\ufeffBOM头改成这样就没问题了：

3.1.4. 继续解决下载文件名的问题

大部分浏览器可能都沒啥问题，但是一些比较老的Chrome可能下载的时候指定的download就是不生效此时可以用blob来解决：

建议一般情况下都用这种方法，稳妥一点

不考虑兼容性的保存CSV方法：

考虑兼容性的保存CSV方法：

3.2. JS实现纯文本的下载保存

掌握了csv，再去下载纯文本基本上就没啥问题了就是换一下文件类型洏已：

3.3. JS实现图片的下载保存

网页上一般要保存图片都是从canvas里面拿到的图片数据，通过toDataURL转换为base64数据：

关于文件保存不嫌麻烦的话，GitHub上面有個比较出名的库：

以上所述是小编给大家介绍的JS实现弹出下载对话框及常见文件类型的下载希望对大家有所帮助，如果大家有任何疑问請给我留言小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！