将_body内容(字符串)转换为arrayBuffer

时间:2019-04-14 20:16:07

标签: javascript html ionic-framework filereader

我有一个Ionic应用程序,可以从Web API下载文件。可以在HTTP响应的_body属性中找到文件的内容。

enter image description here

我要做的是将文本转换为arrayBuffer,以便将内容保存到文件中。

但是,我遇到的问题是,任何包含图像和/或较大尺寸的文件(在我的实例中为PDF文件)要么根本不显示,要么显示为错误的文件。

起初,我认为这是与离子相关的问题。因此,请确保我尝试模拟此问题并能够重现它。 您可以选择一个PDF文件,然后下载该文件。您会发现下载的文件已损坏,以及Ionic应用程序显示它们的确切方式。

HTML:

<input type="file" id="file_input" class="foo" />
<div id="output_field" class="foo"></div>

JS:

$(document).ready(function(){
    $('#file_input').on('change', function(e){
        readFile(this.files[0], function(e) {
            //manipulate with result...
            $('#output_field').text(e.target.result);
            try {
            var file = new Blob([e.target.result], { type: 'application/pdf;base64' });
            var fileURL = window.URL.createObjectURL(file);
            var seconds = new Date().getTime() / 1000;
            var fileName = "cert" + parseInt(seconds) + ".pdf";
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.style = "display: none";
            a.href = fileURL;
            a.download = fileName;
            a.click();
            }
            catch (err){
            $('#output_field').text(err);
            }
        });

    });
});

function readFile(file, callback){
    var reader = new FileReader();
    reader.onload = callback
    //reader.readAsArrayBuffer(file);
    reader.readAsText(file);
}

https://jsfiddle.net/68qeau3h/3/

现在,当使用reader.readAsArrayBuffer(file);时,一切都能按预期工作,但是在我的特殊情况下,我使用reader.readAsText(file);,因为这是为我检索数据的方式,这是文本形式。

添加这些代码行以尝试将字符串转换为arrayBuffer

...
var buf = new ArrayBuffer(e.target.result.length * 2); // 2 bytes for each char
             var bufView = new Uint16Array(buf);
             for (var i=0, strLen=e.target.result.length; i<strLen; i++) {
               bufView[i] = e.target.result.charCodeAt(i);
                  }

            var file = new Blob([buf], { type: 'application/pdf' });
...

这将不起作用,并生成浏览器无法打开的PDF文件。

总而言之,我想做的就是以某种方式将我从reader.readAsText(file);得到的结果转换成reader.readAsArrayBuffer(file);产生的结果。因为我正在使用的文件或从后端获取的数据就是这种文本形式。

0 个答案:

没有答案