VUE实现下载文件，避免浏览器默认直接打开文件

文件下载时浏览器遇到txt,jpg,png,pdf,mp4等文件会直接预览而不是直接下载。

踩坑1 window.open()

Window 接口的 open() 方法，是用指定的名称将指定的资源加载到浏览器上下文（窗口 window ，内嵌框架 iframe 或者标签 tab ）。如果没有指定名称，则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。

// 后端返回的是下载链接
window.open(url);

这个方法只能将指定路径的资源加载到浏览器里，如果该文件不能被浏览器预览，浏览器就会下载该文件，但是，如果浏览器可以预览该文件呢？是不是这个方法不可以实现？这是我下载文本txt的时候踩的坑，用该方法浏览器会直接预览该txt文件。

踩坑2 window.location.href和html的a标签下载

// html a标签下载
const link = document.createElement('a')link.href = response.data.link // 后端返回的文件下载链接link.click()// window.location.href
window.location.href = response.data.link //后端返回的下载链接

服务端在头部(headers)加字段 Content-Disposition

这个方案是后端去做的，具体可以怎么修改可以问一下后端

解决方案有两种

方案1 downloadjs 插件进行下载

npm地址：downloadjs - npm

// 安装
npm install downloadjs -S// 导入
import download from "downloadjs"// 使用
download(url, strFileName, strMimeType);download第一个参数为URL，第二个参数为文件名称，第三个参数文件类型，url必填，另外两个选填

优点：可以下载不会出现预览情况

缺点：1. 下载的文件打不开，大小也对不上。 2. 不能自定义名称 (在URL进行转码后虽然可以下载文件，但名称却是转码后的名称，而不是原本的名称，这时我们用第二个参数进行命名时，名称是对了，可文件却出现打不开，大小不对的情况)

方案2 file-saver

github地址：https://github.com/eligrey/FileSaver.js

// 安装
npm i file-saver
or
yarn add file-saver
// 导入
import { saveAs as FileSaver } from 'file-saver'
// 使用
// 在方法内使用该代码片段
const oReq = new XMLHttpRequest()
const URL= '' // URL 为下载的URL地址
oReq.open('GET', URL, true)
oReq.responseType = 'blob'
oReq.onload = function() {const file = new Blob([oReq.response], {type: 'blob'})FileSaver.saveAs(file, fileName) // fileName为文件名
}
oReq.send()

记录：

触发浏览器预览的文件后缀有哪些呢(我也给总结一下)

['jpg', 'txt', 'png', 'pdf', 'jpeg', 'gif', 'html', 'art', 'au', 'aiff', 'xbm', 'swf', 'ext2', 'ext3', 'ascii', 'mime', 'wmv', 'asf', 'asx', 'rmvb', 'rm', 'mp4', '3gp', 'mov', 'm4v', 'avi', 'dat', 'mkv', 'flv', 'vob', 'wave', 'audio', 'mpeg', 'realaudio', 'tiff', 'raw', 'bmp', 'exe', 'sys', 'com']

结语

人生不易，永远也不该演戏作假。