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

xiatianlong
  • 2.2k

需求:

后端异步返回我一个物理的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上报类型不对:

clipboard.png

在IE上打开也提示错误:

clipboard.png

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

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

回复
阅读 1.6k
1 个回答

问题已解决。这是浏览器的机制问题。
解决办法,模拟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;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏