【问题标题】:JavaScript code to display PDF file in browser from byte array (not base64 encoded)从字节数组(非 base64 编码)在浏览器中显示 PDF 文件的 JavaScript 代码
【发布时间】:2016-05-12 08:40:36
【问题描述】:

我正在使用一个 ASP .NET Web API,其中 API 的 POST 函数返回一个字节数组,就像 C# 代码中这样:

return Ok(outputStream.ToArray());

其中 outputStream 是 System.IO.MemoryStream 类型,而 ToArray() 返回一个字节数组。

这个函数正在返回一个 PDF 流,我想在他们的浏览器中显示给用户,或者至少让他们保存它。

我遇到了来自 Stack Overflow 的 JavaScript example,它展示了如何从 Base64 编码的字符串中获取 Blob 并显示它,当 API 返回 Base64 编码的字符串时,我能够让它工作;但是,当 API 如前所示返回字节数组时,我无法让它工作。

我能否获得一些代码示例,说明如何在 API 返回字节数组时使其工作?

【问题讨论】:

    标签: javascript asp.net rest browser


    【解决方案1】:

    我的 JQuery Ajax POST 请求如下所示:

    function LoadPDF() {
            var args = [];
            var x = $.ajax({
                type: "POST",
                url: "DirectoryQuery.aspx/GetFullPdf",
                contentType: "application/json; charset=UTF-8",
                responseType: "text/plain; charset=UTF-8",
                async: true,
                dataType: "json",                             
                processData: "false",
                success: OnSuccess,
                error: OnErrorCall
            }); 
            function OnSuccess(response) {
                var byteArray = new Uint8Array(response.d);
    
                saveTextAsFile("document.pdf", byteArray);
            }
            function OnErrorCall(response) {
                console.log(response);                
                //location.reload();
            }
        }
    

    试试 file-save-as.js,像这样:

    function saveTextAsFile(fileNameToSaveAs, textToWrite) {
        /* Saves a text string as a blob file*/
        var ie = navigator.userAgent.match(/MSIE\s([\d.]+)/),
          ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/),
          ieEDGE = navigator.userAgent.match(/Edge/g),
          ieVer = (ie ? ie[1] : (ie11 ? 11 : (ieEDGE ? 12 : -1)));
    
        if (ie && ieVer < 10) {
            console.log("No blobs on IE ver<10");
            return;
        }
    
        var textFileAsBlob = new Blob([textToWrite], {
            type: 'text/plain'
        });
    
        if (ieVer > -1) {
            window.navigator.msSaveBlob(textFileAsBlob, fileNameToSaveAs);
    
        } else {
            var downloadLink = document.createElement("a");
            downloadLink.download = fileNameToSaveAs;
            downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
            downloadLink.onclick = function (e) { document.body.removeChild(e.target); };
            downloadLink.style.display = "none";
            document.body.appendChild(downloadLink);
            downloadLink.click();
        }
    }
    

    【讨论】:

    • 对不起,它似乎不起作用。当我尝试将 responseType 设置为您在示例中指定的内容时,我也收到此错误消息:The provided value 'text/plain; charset=UTF-8' is not a valid enum value of type XMLHttpRequestResponseType.
    • 老实说,我不知道为什么是 text/plain;对您来说是无效值;也许尝试删除“charset=UTF-8”并只使用“text/plain”,希望 UFT-8 是默认值?
    • 修改了我的答案以包含 file-save-as.js 实现。希望对你有帮助
    猜你喜欢
    • 2016-11-20
    • 2020-03-25
    • 2015-10-09
    • 1970-01-01
    • 2021-11-21
    • 1970-01-01
    • 1970-01-01
    • 2013-05-12
    • 1970-01-01
    相关资源
    最近更新 更多