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

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

踩坑1 window.open()

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

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

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

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

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

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

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

解决方案有两种

方案1downloadjs插件进行下载

npm地址：downloadjs – npm

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

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

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

方案2file-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']

结语

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