在 Chrome IOS 上加载 PDF 时出现问题答案

【问题标题】：Trouble loading PDF on Chrome IOS在 Chrome IOS 上加载 PDF 时出现问题
【发布时间】：2012-10-20 07:54:22
【问题描述】：

在我们的移动网络应用程序中下载（或尝试下载）pdf 时，我们从 Chrome 收到以下消息。

“警告：这里有问题！...您尝试访问的网站运行异常，Chrome 无法验证 URL 是否正确。”

这在 Safari 中运行良好，基本上我们正在这样做。

在加载时调用以验证我们要显示的文档是否正常。
- 如果文档不正确，请向用户发送消息，然后关闭选项卡
引导选项卡导航到下载 PDF 的地址。

无需发布太多代码，Javascript 是这样的：

DoRequest ("print_report",
           "VALIDATE",
           mycallback);

function mycallback (data,error) {

    var h_href = "";
    var h_widget = "";

    if(error == true) {
        window.close(); 
        return;
    }    

    h_href = GenerateHREF( "print_report", "PRINT" );

    window.location.href = h_href;        
}

GenerateHREF 提供的 URL 用于相同的原始站点，并且与原始站点相关。
mime 类型设置为 application/pdf。内容处置设置为内联。我也尝试过设置 content-size 标头，但似乎没有任何效果。

Content-Disposition: attachment; filename="pp66.26.pdf"
Content-Length: 31706
Content-Type: application/pdf

我错过了什么……只是什么？

【问题讨论】：

我目前猜测它与弹出窗口阻止有关，方法是在导航 Chrome 开始显示链接之前立即添加用户交互。
虽然不是专门回答 ios Chrome 的远程调试会有所帮助。 stackoverflow.com/questions/11262236/…
我认为这是一个 chrome bugg，请参阅此链接：code.google.com/p/chromium/issues/detail?id=85549，关于 Content-Length。

标签： javascript ios google-chrome pdf

【解决方案1】：

尝试将文档解析为 base64 并添加到您的文档或 iframe。

    function getAsyncBase64(fileName, callBack){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', fileName, true);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function (e) {
        if (this.status == 200) {
            var uInt8Array = new Uint8Array(this.response || this.responseText);
            var i = uInt8Array.length;
            var binaryString = new Array(i);
            while (i--) {
                binaryString[i] = String.fromCharCode(uInt8Array[i]);
            }
            var dataBinary = binaryString.join('');
            var data64 = window.btoa(dataBinary);
            callback(data64);                
        }
        xhr.send();
    };
    function callback(base64){
        window.open(base64, "_blank");
        //or
        iframe.src = "data:application/pdf;base64,"+ base64;
    };

    getAsyncBase64(url,callback);

【讨论】：

【解决方案2】：

我还认为弹出窗口行为可能在嫌疑人列表中居高不下（特别是 window.close(); 行似乎非常可疑，尤其是在弹出窗口被用户阻止的情况下）。

但是，由于最终目标是下载文件，您可以尝试将响应标头更改为

Content-Disposition: attachment; filename="pp66.26.pdf"
Content-Length: 31706
Content-Type: applicaton/octet-stream

或者您可以尝试强制特定文件夹中的所有 pdf 文件通过 .htaccess 文件强制下载，然后通过您正在使用的 location.href 链接到它们：

<FilesMatch "\.pdf$">
ForceType applicaton/octet-stream
Header set Content-Disposition attachment
</FilesMatch>

【讨论】：

【解决方案3】：

如果是弹出/下载问题，您可以使用 iframe 显示它吗？

<iframe src="downloads/report.pdf"></iframe>

【讨论】：