js文件下载替换文件名,vue下载文件替换文件名

  • 时间:
  • 来源:互联网
  • 文章标签:

下载文件方法

1、window.open和window.location.href

a,window.open()在下载文件的时候会打开一个新的页面,同时会暴露链接地址, 而且会在下载文件的过程中,访问链接2次,虽然前端只下载了一次文件,但是服务端会生成2次文件。

b,对于rar.doc.等浏览器不能打开的文件,使用window.location.href是完全可以实现下载的。

  示例: window.location.href="http://下载.rar" ,等同于<a href="http://下载.rar">下载</a>

c,对于浏览器能打开得文件,例如html,xml,txt等,这样去写就不是下载,而是打开。我们想下载得话就得使用如下方法,

2.form表单

用动态生成的form元素,实现表单提交,并完成下载。注意此处不会ajax。原理仅仅是表单的提交。

由于jQery的ajax函数、及ajaxSubmit等函数的返回类型(dataType),只有xml、text、json、html等类型,没有’流’类型,故我们只要实现ajax下载时,不能够使用相应的ajax函数进行文件下载。

不过我们可以通过js生成一个form,用这个form提交参数,并返回“流”,类型数据。在实现过程中,页面也没有刷新

a标签(兼容性比较差,chrome没问题)

   <a href="#"></a>

或者

let ipUrl = 'http://' + this.user.ip + ':' + msgUrl;
let a = document.createElement('a');
    //
    a.setAttribute('download', '');
    a.href = ipUrl;
    a.click();
  document.body.removeChild(a); // 下载完成移除元素

iframe

如果是get方式的url下载链接,客户端可以通过一个动态生成的隐藏的iframe来得到下载的二进制文件。原理:iframe有一个src属性,其本质就是发送http请求,get页面或者数据。

down(){
     try{
              let iframeRequest = document.createElement('iframe');
              iframeRequest.id = "IFrameReauest";
              iframeRequest.src = ipUrl;
              iframeRequest.style.display = "none";
              document.body.appendChild(iframeRequest);
            }catch{
              console.log('下载异常');
            }

}

插件download.js(具体请看官网:http://danml.com/download.html)

安装

npm install downloadjs --save

引入
import download from ‘downloadjs’ 引入

最后通过download()方法使用
下载调用的方法download(data, strFileName, strMimeType)对应为:download(“数据”,“想要起的名称”,“Mime类型”),当不写后面的两个参数时,就可以下载指定文件了(不支持跨域),源码很简单就是没有后面的参数,就会通过ajax发送一个get请求,获取url的二进制流,然后把二进制流转化为对象就完成了下载工作。

本文链接http://www.taodudu.cc/news/show-1781922.html