前端js下载文件.txt,图片，.doc等

1. 插件FileSaver.js
   除了这个插件外还有download， downloadjs，这两个插件使用起来都有bug，暂时不推荐

npm install file-saver


import {saveAs} from 'file-saver'
saveAs(Blob/File/Url,  filename, type(可省略))

3. 纯js

getBlob(url) {
            return new Promise(resolve => {
                const xhr = new XMLHttpRequest();

                xhr.open('GET', url, true);
                xhr.responseType = 'blob';
                xhr.onload = () => {
                    if (xhr.status === 200) {
                        resolve(xhr.response);
                    }
                };

                xhr.send();
            });
        },

        saveAs(blob, filename) {
            if (window.navigator.msSaveOrOpenBlob) {
                navigator.msSaveBlob(blob, filename);
            } else {
                const link = document.createElement('a');
                const body = document.querySelector('body');

                link.href = window.URL.createObjectURL(blob);
                link.download = filename;

                // fix Firefox
                link.style.display = 'none';
                body.appendChild(link);

                link.click();
                body.removeChild(link);

                window.URL.revokeObjectURL(link.href);
            }
        },
        download(url, filename) {
            this.getBlob(url).then(blob => {
                this.saveAs(blob, filename);
            });
        },

或

downloadFileByUrl: (url, name) => {
            axios({ // 用axios发送post请求
                method: 'get',
                url: url, // 请求地址
                // data: form, // 参数
                responseType: 'arraybuffer' // 表明返回服务器返回的数据类型
            })
                .then((result) => {
                    const content = result.data;
                    const blob = new Blob([content]);
                    const fileName = name;
                    if ('download' in document.createElement('a')) { // 非IE下载
                        const elink = document.createElement('a');
                        elink.download = fileName;
                        elink.style.display = 'none';
                        elink.href = URL.createObjectURL(blob);
                        document.body.appendChild(elink);
                        elink.click();
                        URL.revokeObjectURL(elink.href); // 释放URL 对象
                        document.body.removeChild(elink);
                    } else { // IE10+下载
                        navigator.msSaveBlob(blob, fileName)
                    }
                }).catch((err) => {
                    console.log(err)
                });
        }

第二种需要axios，自己配置，
注意：无论是插件还是纯js只能下载同源的文件，本地调试的时候，只要能下载下来就好，如果不是同源的文件内容会变成请求的报错
3.最近又发现一个比较好用的vue插件，可以下载任何格式 downloadjs
npm 链接