JS实现文件下载(适应多种浏览器)

最新推荐文章于 2024-01-31 17:16:03 发布
最新推荐文章于 2024-01-31 17:16:03 发布
阅读量2.2w 收藏 9
点赞数 1
分类专栏： 日常积累 文章标签： 文件下载 javascript 浏览器适应
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wszcy199503/article/details/78193676
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS实现文件上传下载</title>
</head>
<body>
<a href="javascript:void(0);" id="oDownLoad" οnclick="oDownLoad('1.pdf','oDownLoad')">下载</a>
</body>
<script>
    function myBrowser(){
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isOpera = userAgent.indexOf("Opera") > -1;
        if (isOpera) {
            return "Opera"
        }; //判断是否Opera浏览器
        if (userAgent.indexOf("Firefox") > -1) {
            return "FF";
        } //判断是否Firefox浏览器
        if (userAgent.indexOf("Chrome") > -1){
            return "Chrome";
        }
        if (userAgent.indexOf("Safari") > -1) {
            return "Safari";
        } //判断是否Safari浏览器
        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
            return "IE";
        }; //判断是否IE浏览器
        if (userAgent.indexOf("Trident") > -1) {
            return "Edge";
        } //判断是否Edge浏览器
    }

    function oDownLoad(url,id) {
        if (myBrowser()==="IE" || myBrowser()==="Edge"){
            var oPop = window.open(url,"","width=1, height=1, top=5000, left=5000");
            for(; oPop.document.readyState != "complete"; )
            {
                if (oPop.document.readyState == "complete")break;
            }
            oPop.document.execCommand("SaveAs");
            oPop.close();
        }else{
            //!IE
            var odownLoad=document.getElementById(id);
            odownLoad.href=url;
            odownLoad.download="";
        }
    }
</script>
</html>


注：在html同一目录下准备一个1.pdf文件。

花开不合阳春暮
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
解决各大浏览器下载文件名显示不正确的情况
紫竹blog
06-11 1980
下载时，最关键的三步： response.reset();//清空缓存区，防止存在某些字符使得下载的文件格式错误 response.setContentType("application/pdf;charset=UTF-8");//指定文件类型，其他类型可参见w3school的文档，也可参见下文的附录标准 response.setHeader("Content-Disposition", "...
js10单文件论坛asp版 v1.0.rar
07-09
简单的DIV CSS结构,支持主流浏览器*本论坛非常适应在[华夏主机网]高性能asp环境下文档运行 本系统推荐给以下用户:拥有自己的个人网站,但空间条件不足开设大型论坛的个人用户企业网站客户交流几乎可以运用于所有小型...
html+JS插件播放MP4格式视频
01-09
1、打开html页面，里面的a.mp4文件没有上传，请根据自己需要进行修改。 2、在IIS服务器部署后，如果发现无法浏览的话，请按照以下步骤操作： 因为是播放的mp4文件，所以请在IIS的MIME类型中添加 .mp4 application/octet-stream
事件订阅发布JavaScript库onfire.js.zip
07-19
onfire.js 是一个很简单的事件分发的Javascript库（仅仅 0.9kb），简洁实用。 可以用于: 简单的事件分发； 在 react / vue.js / angular 用于跨组件的轻量级实现； 事件订阅和发布； API方法： 1.on(event_name, callback) 绑定事件，参数为event_name和callback， 当有名字为event_name的事件发生的时候，callback方法将会被执行。 这个方法会返回一个eventObj，这个可以用于使用un(eventObj)方法来取消事件绑定。 2.one(event_name, callback) 绑定（订阅）事件，参数为 event_name with callback. 当被触发一次之后失效。只能被触发一次，一次之后自动失效。 3.fire(event_name, data) 触发名字为event_name的事件，并且赋予变量data为callback方法的输入值。 4.un(eventObj / eventName / function) 取消事件绑定。可以仅仅取消绑定一个事件回调方法，也可以直接取消全部的事件； 5.clear() 清空所有事件。 使用Demo： 1. 引入js文件 npm install onfire.js 可以使用[removed]标签直接引入； 也可以使用require或者import关键字引入，会得到全局变量 onfire。 import onfire from 'onfire.js'; // or var onfire = require("onfire.js"); 2. 简单使用 使用方法on来订阅事件, 使用un来取消订阅, 使用fire方法来触发事件。 import onfire from 'onfire.js'; // 绑定事件 var eventObj = onfire.on('test_event', function(data) {     console.log('this is a event 1'); }); var eventObj2 = onfire.on('test_event', function(data) {     console.log('this is a event 2'); }); // 触发事件 onfire.fire('test_event', 'test_data'); // 取消绑定 onfire.un(eventObj); // 取消绑定这个事件. onfire.un('test_event'); // 取消绑定所有的 `test_event`. 标签：onfire
js实现下载文件
最新发布
未来可期的博客
01-31 415
【代码】js实现下载文件。
downloadjs通过javascript触发文件下载
08-11
使用JS和HTML5下载在客户端下载文件
前端浏览器兼容性的问题以及解决方案
qq_46663280的博客
09-26 1700
浏览器兼容性解决方案
js如何分片下载超出2G的大文件？
smallfatman的博客
06-21 2456
这段代码使用了Fetch API来下载文件，同时使用了Range头来告诉服务器只需要下载文件的一部分。将文件大小分割为块，每次下载一块数据，最后将数据组合成一个Blob对象进行下载。需要注意的是，如果下载的文件有Content-Range头，则需要先从这个头里获取文件总大小。
js实现PDF 预览和文件下载
前端开发工程师博客
05-26 1万+
综上所述，实际在实现pdf预览的过程中可能暂时没有办法达到完美的方式，特别是针对类似发票类的pdf无法保证 h5移动端都具备下载功能无法保证 pdf预览时，预览的字体和实际发票字体保持一致现有大部分的预览方式都基于pdf.js的方式实现，而pdf.js内部通过的方式基于文件地址或数据流来获取内容，再通过canvas处理渲染pdf文件，感兴趣可以去研究pdf.js源码。pdf.js带来相关问题就是如果对应的pdf文件中包含了pdf.js中不存在的字体，那么就无法完整渲染，另外渲染出来的字体和原本的。
js - - - - - 如何批量下载文件
Dark_programmer的博客
08-23 1508
js - - - - - 如何批量下载文件
js下载文件
qq_37299479的博客
03-13 4449
js 下载文件
javascript 大文件下载，分片下载，断点续传
qq_41974199的博客
11-04 4959
既然是断点续传，自然离不开分片下载。接下来，我们将一个文件分片并一个一个下载。首先，我们需要获取文件的大小，以便更好地对其进行分段。
Code-Quiz:在Web开发的职业道路上，可能会要求您完成编码评估，该评估通常是多项选择题和互动挑战的结合。 我构建了一个包含多项选择题的定时代码测验，以在显示技术能力的同时复制体验。 该应用程序将在浏览器中运行，并具有由JavaScript驱动的动态更新HTML和CSS。 它还将具有干净，优美的用户界面，并具有响应能力，以确保它适应多种屏幕尺寸
05-25
它还将具有干净，优美的用户界面，并具有响应能力，从而确保它可以适应多种屏幕尺寸。目录：安装： 您可以将该仓库“ git clone”到本地计算机上，然后在Web浏览器中运行HTML文件。用户的故事 AS A coding bootcamp...
web-uploader-node:轻量级 web (html5 + html4) 文件上传组件，纯js，支持上传进度显示，支持秒传+分片上传+断点续传，支持图片预览及缩放，支持 IE6+、Firefox、Chrome等
05-05
支持图片预览（IE6+、其它浏览器）和缩放（IE10+、其它浏览器）支持秒传+分片上传+断点续传（IE10+、其它标准浏览器），适应多种上传环境（默认基于md5，不限于浏览器和使用场景，只要文件相同即可；也可自行实现...
web-uploader:轻量级 web (html5 + html4) 文件上传组件，纯js，支持上传进度显示，支持秒传+分片上传+断点续传，支持图片预览及缩放，支持文件夹上传，支持 IE6+、Firefox、Chrome等
05-05
支持秒传+分片上传+断点续传（IE10+、其它标准浏览器），适应多种上传环境（默认基于md5，不限于浏览器和使用场景，只要文件相同即可；也可自行实现hash计算） 上传文件的同时可以指定上传参数，支持上传类型过滤 ...
web-uploader.rar
08-26
4.支持秒传+分片上传+断点续传（IE10+、其它标准浏览器），适应多种上传环境（默认基于md5，不限于浏览器和使用场景，只要文件相同即可；也可自行实现hash计算） 5.上传文件的同时可以指定上传参数，支持上传类型...
JS(history,location的使用)返回上一页以及返回上一页并刷新
热门推荐
花开不合阳春暮
10-11 2万+
window.history.go(-1);//返回上一页不刷新 window.history.back(); //返回上一页 window.location.href = document.referrer;//返回上一页并刷新，真正实现页面后退并刷新页面 history.go(1);//前进一页 history.forward(); //前进一页 history.length;//用le
CentOS7磁盘挂载及开机启动自动挂载
花开不合阳春暮
12-04 2万+
查看现有磁盘 df -HT 查看新磁盘 fdisk –l 找到新添加的磁盘的编号为/dev/vdb 格式化分区 将新分区格式化为ext3文件系统 mkfs -t ext3 /dev/vdb1 挂载硬盘 1.创建挂载点 mkdir /home 2.将/dev/vdb挂载到/home下 mount /dev/vdb /home 3.设置开机启动自动挂载 新创建的分区不能开机自动挂载，每次...
flexible.js文件下载
08-18
flexible.js是一种用于web开发的javascript文件，其作用是使网页布局能够自动适应不同的屏幕尺寸和设备。通过使用flexible.js，开发者可以实现响应式网页设计，使网页在手机、平板和电脑等不同设备上都能够展示出最佳的布局效果。 要下载flexible.js文件，可以按照以下步骤进行： 1. 打开浏览器，在搜索引擎中搜索"flexible.js下载"，会得到一系列包含该文件的网站链接。 2. 选择一个可靠的网站，点击该链接进入网站页面。 3. 在网站页面中，找到并点击"下载"或者"Download"按钮。 4. 值得注意的是，一些网站可能需要先注册账号或者进行人机验证才能下载文件。如果有需要，按照网站的提示进行操作。 5. 下载flexible.js文件后，可以将它保存到项目所需的文件夹中。 6. 在HTML文件中，通过<script>标签引入flexible.js文件，以便在网页中使用它的功能。 7. 在引入文件后，根据需要使用flexible.js的功能进行相应的布局调整。 总之，下载flexible.js文件只需简单的几个步骤，选择可靠的来源，点击下载按钮，保存文件，然后在网页中引入即可使用。通过使用flexible.js，可以实现灵活的网页布局，适应多种不同的设备和屏幕尺寸，提供更好的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值