Angularjs字节数组到Blob

时间:2016-04-19 14:37:52

标签: javascript angularjs pdf

我正在尝试使用Angular和PDF.js在我们的SQL数据库中查看保存在二进制数据中的PDF。从服务返回的数据如下所示:

enter image description here

基本上,我认为我需要创建一个objectURL才能工作,但我不确定如何将它转换为blob。我尝试过以下方法:

        .success(function (response) {
        var fileName = response[0].FileName;
        var fileImage = response[0].binFileImage;
        var blob = new Blob(fileImage, { type: 'application/pdf' });
        var fileURL = URL.createObjectURL(blob);

我使用以下内容转换图像文件:

 function base64ArrayBuffer(arrayBuffer) {
    var base64 = ''
    var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'

    var bytes = new Uint8Array(arrayBuffer)
    var byteLength = bytes.byteLength
    var byteRemainder = byteLength % 3
    var mainLength = byteLength - byteRemainder

    var a, b, c, d
    var chunk

    // Main loop deals with bytes in chunks of 3
    for (var i = 0; i < mainLength; i = i + 3) {
        // Combine the three bytes into a single integer
        chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2]

        // Use bitmasks to extract 6-bit segments from the triplet
        a = (chunk & 16515072) >> 18 // 16515072 = (2^6 - 1) << 18
        b = (chunk & 258048) >> 12 // 258048   = (2^6 - 1) << 12
        c = (chunk & 4032) >> 6 // 4032     = (2^6 - 1) << 6
        d = chunk & 63               // 63       = 2^6 - 1

        // Convert the raw binary segments to the appropriate ASCII encoding
        base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d]
    }

    // Deal with the remaining bytes and padding
    if (byteRemainder == 1) {
        chunk = bytes[mainLength]

        a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2

        // Set the 4 least significant bits to zero
        b = (chunk & 3) << 4 // 3   = 2^2 - 1

        base64 += encodings[a] + encodings[b] + '=='
    } else if (byteRemainder == 2) {
        chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1]

        a = (chunk & 64512) >> 10 // 64512 = (2^6 - 1) << 10
        b = (chunk & 1008) >> 4 // 1008  = (2^6 - 1) << 4

        // Set the 2 least significant bits to zero
        c = (chunk & 15) << 2 // 15    = 2^4 - 1

        base64 += encodings[a] + encodings[b] + encodings[c] + '='
    }

    return base64
}

我尝试将它用于PDF,但我不确定这是否是正确的格式。上面的函数将字节数组转换为:

JVBERi0xLjQNCiX5+prnDQo3IDAgb2JqDQo8PA0KL0UgMzU0ODENCi9IIFsgMTM3OCAxNjMgXQ0KL0wgMzc3NzkNCi9MaW5lYXJpemVkIDENCi9OIDINCi9PIDEwDQovVCAzNzU4OQ0KPj4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICANCmVuZG9iag0KDQp4cmVmDQo3IDExDQowMDAwMDAwMDE3IDAwMDAwIG4NCjAwMDAwMDEyN... (shortened).

我不确定我需要做什么来转换数据,这样我就可以用它来创建一个对象url,这样我就可以查看pdf了。非常感谢任何帮助!

2 个答案:

答案 0 :(得分:11)

这可能是一种更简单的方法,但这适用于IE和Chrome。

  1. 首先,我将字节数组转换为base64。
  2. 接下来,我将base64转换为Uint8Array。
  3. 然后我显示文件。
  4. 以下代码对我有用:

        lwsService.getdocument(id)
        .success(function (response) {
           var byteArray = new Uint8Array(response[0].binFileImage);
           var blob = new Blob([byteArray], { type: 'application/pdf' });
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveOrOpenBlob(blob);
            } else {
              var objectUrl = URL.createObjectURL(blob);
              window.open(objectUrl);
            }
    

    我希望这有助于其他人。

答案 1 :(得分:2)

尝试以下示例。它正在使用FileSaver

var blob = new Blob([content], {type: 'application/octet-stream'});
saveAs(blob, "yourFile.pdf");