javascript - 请教关于用文件地址打开的问题。

问题描述

问 题

需求：

后端异步返回我一个物理的pdf文件路径，我想直接在前端打开，代码如下：

promAjax({
    url: "${pageContext.request.contextPath}/test.html",
    type: "POST",
    dataType: "json",
    success: function(data) {
        if (data.result == 'success') {
            window.location.href= data.fileUrl
        } else {
            toastMessage(data.message);
        }
    }
});

data.fileUrl返回的就是https://filet.youmywealth.com...

window.location.href = 'https://filet.youmywealth.com/f2c68b89-cab8-4b57-a261-b00a086bd01a.pdf';

有一段脚本，目的是想直接打开一个文件。

可是我发现这样只能在firefox上打开。
在chrome上报类型不对：

在IE上打开也提示错误：

请教如何才能在js里拿到文件然后直接打开。

测试发现：在ios和android的微信，浏览器里均能正常打开或下载。

解决方案

问题已解决。这是浏览器的机制问题。
解决办法，模拟a标签，将文件地址给到href里，再出发进行跳转。移动端需要另外做判断，这里给出示例代码：

放一个隐藏的a标签(这里a标签不要taget:_blank，会被浏览器安全机制给窗口拦截)：

<a href="" style="display: none;" id="pfd-link">打开pdf</a>

Ajax({
    url: "${pageContext.request.contextPath}/test.html",
    type: "POST",
    dataType: "json",
    success: function(data) {
        if (data.result == 'success') {
            if (isPCDevice()){
                $("#pfd-link").attr("href", data.fileUrl);
                document.getElementById("pfd-link").click();
            }else{
                window.location.href= data.fileUrl;
            }
        } else {
            toastMessage(data.message);
        }
    }
});

顺便贴出判断PC端的代码：

/**
 * 判断客户端的设备类型
 *
 * @returns {boolean}
 */
function isPCDevice() {
    return !isMobilePlatform();
}

/**
 * 通过浏览器的用户代理说明判断客户端是否是移动浏览器
 * 1.微信内置浏览器
 * 2.运行在iphone手机上的浏览器
 * 3.运行在android操作系统上的浏览器
 *
 * @returns {boolean}
 */
function isMobilePlatform() {
    var userAgent = navigator.userAgent.toLowerCase();
    return userAgent.indexOf("micromessenger") >= 0 || userAgent.indexOf("iphone") >= 0 || userAgent.indexOf("android") >= 0;
}

这篇关于javascript - 请教关于用文件地址打开的问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！