前端在线预览pdf、png、jpg文件流

前端通过 arraybuffer 向后端请求文件内容，文件名信息会放在 res.headers["content-disposition"] 里

• 如果浏览器支持 window.navigator 则通过以下方式在线预览：

const data = res.data;
const tempName = decodeURI(res.headers["content-disposition"].split("fileName=")[1]);
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    const blob = new Blob([data], { type: file_type,});
    window.navigator.msSaveOrOpenBlob(blob, tempName);
}

• 如果浏览器不支持 window.navigator 则通过以下方式在线预览：

const data = res.data;
let blob = new Blob([data], {type: file_type,});
let href = window.URL.createObjectURL(blob);
window.open(href);

这种方式会调用当前浏览器自带的pdf查看器、图片查看器来查看pdf、png、jpg文件流

下面附上我封装好的功能函数：

// 预览文件
// url为请求后端文件流接口的url
let previewFile = function (url) {
    request(url, {}, "GET", {}, "arraybuffer")
        .then((res) => {
            console.log(res);
            if (res.headers["content-disposition"] == undefined) {
            	alert("文件可能丢失了！");
            } else {
                let file_type = "";
                let finalindex = res.headers["content-disposition"].split("fileName=")[1].split(".").length;
                let filetype = res.headers["content-disposition"].split("fileName=")[1].split(".")[finalindex - 1]
                if (["pdf", "png", "jpg", "jpeg"].includes(filetype)) {
                    switch (filetype) {
                        case "pdf":
                            file_type = "application/pdf";
                            break;
                        case "png":
                            file_type = "image/png";
                            break;
                        case "jpg":
                            file_type = "image/jpeg";
                            break;
                        case "jpeg":
                            file_type = "image/jpeg";
                            break;
                    }
                    const data = res.data;
                    const tempName = decodeURI(
                        res.headers["content-disposition"].split("fileName=")[1]
                    );
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        const blob = new Blob([data], {
                            type: file_type,
                        });
                        console.log(tempName);
                        window.navigator.msSaveOrOpenBlob(blob, tempName);
                    } else {
                        let blob = new Blob([data], {
                            type: file_type,
                        });
                        let href = window.URL.createObjectURL(blob);
                        console.log(href);
                        window.open(href);
                    }
                } else {
                	alert("该文件类型暂不支持在线预览，请下载后查看！");
                }
            }
        })
        .catch((err) => {
            console.log(err);
            alert("出错了！");
        });
}

export default {
    previewFile
}