js下载文件的几种方式，你学废了吗_js下载文件时不想在edge中打开在线office,想直接下载怎么做

项目中总是遇到各种下载文件的需求，记录一下我用的最多的三种方式，有更多方法请一定在评论区和大家分享哦。（友情提示：下面代码格式是react写法）
方式一：点击a标签直接下载。 （有个弊端：下载失败的话会跳转）
<a href=url download>a标签下载</a>
方式二：点击按钮创建一个a标签来下载 
 <button onClick={this.createLinkFirst}>创建a链接下载</button>
 createLinkFirst=()=> {
        //踩坑：
        //用户点击下载多媒体文件(图片/视频等)，最简单的方式，如果url指向同源资源，是正常的。 
        // 如果url指向第三方资源，download会失效，表现和不使用download时一致——浏览器能打开的文件，浏览器会直接打开，不能打开的文件，会直接下载。浏览器打开的文件，可以手动下载。
        //解决方案一：将文件打包为.zip/.rar等浏览器不能打开的文件下载。
        //解决方案二：通过后端转发，后端请求第三方资源，返回给前端，前端使用file-saver等工具保存文件。
        // 如果url指向的第三方资源配置了CORS，download依然无效，但可以通过xhr请求获取文件，然后下载到本地。
        var a = document.createElement('a')
        a.href = url
        a.download = '企业信息.xlsx'//下载文件名称
        document.body.appendChild(a)
        a.click()
        a.remove()
方式三：通过文件流方式下载 
<button onClick={this.createLinkSecond}>文件流请求方式下载</button>
//  get 和 post两种方式
createLinkSecond=()=> {
        let url = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'   //请求的URl
         * @name: 下载
         * @msg: get请求 header传参
         * @param {type} 参数一般拼在url后面
         * @return: 
        let xhr = new XMLHttpRequest();    //定义http请求对象
        xhr.open("get", url, true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.setRequestHeader("AAA", 'value');  //头部参数 （参数名，值）
        xhr.send();
        xhr.responseType = "blob";  // 返回类型blob
        xhr.onload = function () {
            if (this.status === 200) {
                let blob = this.response;
                let a = document.createElement('a')
                let url = window.URL.createObjectURL(blob)
                 	a.href = url
                    a.download = '文件' + '.zip'; //下载文件名
                    a.click()
                    window.URL.revokeObjectURL(url)
                } else {
                    console.log('失败')
         * @name: 下载
         * @msg:  post请求  json传参
         * @param {type} 
         * @return: 
        let params={
            a:'aa',
            b:'bb'
        let xhr = new XMLHttpRequest();    //定义http请求对象
        xhr.open("post", url, true);
        xhr.setRequestHeader("Content-type", "application/json"); // json传参
        xhr.setRequestHeader("AAA", 'value');
        xhr.send(JSON.stringify(params));
        xhr.responseType = "blob";  // 返回类型blob
        xhr.onload = function () {
            if (this.status === 200) {
                let blob = this.response;
                let a = document.createElement('a')
                let url = window.URL.createObjectURL(blob)
                a.href = url
                a.download = '文件' + '.zip';  //下载文件名
                a.click()
                window.URL.revokeObjectURL(url)
            } else {
                console.log('失败')
                    项目中总是遇到各种下载文件的需求，记录一下我用的最多的三种方式，有更多方法请一定在评论区和大家分享哦。（友情提示：下面代码格式是react写法）方式一：点击a标签直接下载。（有个弊端：下载失败的话会跳转）&lt;a href=url download&gt;a标签下载&lt;/a&gt;方式二：点击按钮创建一个a标签来下载 &lt;button onClick={this.createLinkFirst}&gt;创建a链接下载&lt;/button&gt; createLinkFirst=()
&lt;div id="objInfo"&gt;
    &lt;jsp:include page="common/navigation.jsp" /&gt;
   &lt;div id="tabBattery"&gt; 
   &lt;p&gt;如果不能播放，请&lt;a href=&
				var path = window.document.location.href;
var pathName = window.document.location.pathname;
var pos = path.indexOf(pathName);
var localhostPath = path.substring(0,pos);
var url = localhostPath+"/sims...
				探索RAR解压新境界：rar.js
项目地址:https://gitcode.com/43081j/rar.js
在当今的Web开发中，处理文件和数据的灵活性至关重要。今天，我们向您隆重推荐一个创新的开源项目——rar.js，这是一个完全由JavaScript编写的RAR格式解析库，无论是在客户端还是服务器端，都能轻松实现RAR文件的提取和操作。
rar.js 提供了一种纯JavaScr...
				前端如何实现文件下载，防止浏览器自动打开可预览文件欢迎踩坑踩坑记录一**window.open()方法**踩坑记录二**html的a标签**踩坑记录三**window.location.href方法**解决问题**使用XMLHttpRequest对象**
很高兴陌生的coder你能点进来，恭喜你，希望我的这篇博客能帮你解决浏览器自动预览txt，pdf等可预览文件，而不是下载这个文件。这篇...
				工作当中时常会遇到对文件的一些处理，比如下载表格、下载图片、下载文件等，这里说一种下载压缩包的方法。
其实也很简单，需要用到一款插件jszip，官方用法都是有的：https://www.npmjs.com/package/jszip
可以直接引入脚本：
<script src='./jszip.js'></script>
也可以在vue项目中直接安装，运行：
由于业务需要，经常遇到下载各类文件的需求，其中最头疼的莫过于前端下载图片了，直接给个图片文件地址会变成直接打开图片，而不是弹窗提示另存为，研究了下前端实现文件下载最便捷的方法还是创建 a 标签，写入download 属性实现点击下载，但这在 ie 浏览器上的实现又与一般浏览器不同，于是摸索之后写了个通用的下载方法，既可用来下载文件也可下载图片，希望能够帮到大家。
npm 安装使用
				var blob = new Blob([res], { type: 'application/x-tar' })
let linkNode = document.createElement('a')
linkNode.download = new Date().Format('yyyy-MM-dd hhmmss')
// linkNode.download = fileName + '.tar'
 linkNode.style.display = 'none'
linkNode.href = URL.cr
				前言：本文详细介绍在开发过程中前端如何与后端配合实现文件下载至本地，并详细说明特殊格式文件如何处理。如果你是一名前端开发者，恰好需要实现后端文件下载至本地的需求，那么恭喜你本篇文章一定会帮到你！
需求：实现二进制下载、URL下载、跨域下载
后端：Spring
前端：Vue
要点：后端返回文件流还是URL下载地址？
一、解析：二进制式下载
流程：后端返回二进制文件流的情况下，我们前端需要...
				JavaScript可以通过以下几种方式实现文件上传：
1. 通过表单提交：可以使用HTML表单中的<input type="file">元素来实现文件上传功能，在表单提交时将文件一并提交到服务器端。
2. 利用Ajax异步上传：可以使用XMLHttpRequest对象来实现异步上传，利用FormData对象将文件内容打包后发送到服务器端。
3. 使用File API：可以使用JavaScript的File API来实现文件选择、读取和上传功能，该API提供了一些方法和属性来处理文件，如FileReader对象用于读取文件内容、File对象用于表示文件等。
4. 使用第三方库：还可以使用一些第三方库来实现文件上传功能，如jQuery、Dropzone.js、Fine Uploader等。这些库提供了丰富的API和组件，使文件上传变得更加方便和易用。