前端下载文件及预览

1.接口设置responseType属性

axios({
        url: encodeURI("XXX/XXX/XXX"),
        params: {
            id
        },
        responseType: "blob"
    })

2.下载设置

针对excel表格的导出：

if (window.navigator.msSaveOrOpenBlob) {
                            // 兼容IE10
                            const blob = res.data
                            window.navigator.msSaveBlob(blob, "错误报告.xlsx")
                        } else {
                            const blob = new Blob([res.data], {
                                // 定义一个blob
                                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
                            })
                            const downloadElement = document.createElement("a") // 创建一个标签
                            const href = window.URL.createObjectURL(blob) // 创建a标签的链接
                            downloadElement.style.display = "none"
                            downloadElement.href = href
                            downloadElement.download = "错误报告.xlsx" // 下载之后文档的名字
                            document.body.appendChild(downloadElement) //把a标签加入body中
                            downloadElement.click()
                            // document.removeChild(document.getElementsByTagName("a")[0]) // 点击之后移除a标签
                            window.URL.revokeObjectURL(href)
                        }

对于上传什么类型下载什么类型：

if (window.navigator.msSaveOrOpenBlob) {
                        // 兼容IE10
                        const blob = res.data
                        //newstr是文件名
                        window.navigator.msSaveBlob(blob, "文件名.png")
                    } else {
                        const blob = res.data
                        const reader = new FileReader()
                        reader.readAsDataURL(blob)
                        reader.onload = e => {
                            const a = document.createElement("a")
                            a.download = decodeURIComponent("文件名.png")
                            a.href = e.target.result
                            document.body.appendChild(a)
                            a.click()
                            // document.body.removeChild(a)
                        }
                    }

	## 预览

var fileInput = document.querySelector('input[type=file]');
var previewImg = document.querySelector('img');

fileInput.addEventListener('change', function () {
    var file = this.files[0];
    var reader = new FileReader();

    reader.addEventListener('load', function () {
        previewImg.src = reader.result;
    }, false);

    reader.readAsDataURL(file);
}, false);