Javascript Angularjs 字节数组到 Blob

Angularjs Byte Array to Blob

提问by Rani Radcliff

I am trying to view a PDF saved in binary data in our SQL database using Angular and PDF.js. The data returned from the service looks like this:

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

Essentially, I believe that I need to create an objectURL for it to work, but I'm not sure how to convert it to a blob. I have tried the following:

从本质上讲，我相信我需要创建一个 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);

I use the following to convert image files:

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

 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
}

I tried using it for the PDF, but I'm not sure if that is the correct format. The above function converts the byte array to:

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

JVBERi0xLjQNCiX5+prnDQo3IDAgb2JqDQo8PA0KL0UgMzU0ODENCi9IIFsgMTM3OCAxNjMgXQ0KL0wgMzc3NzkNCi9MaW5lYXJpemVkIDENCi9OIDINCi9PIDEwDQovVCAzNzU4OQ0KPj4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICANCmVuZG9iag0KDQp4cmVmDQo3IDExDQowMDAwMDAwMDE3IDAwMDAwIG4NCjAwMDAwMDEyN... (shortened).

I'm not really sure what I need to do to convert the data so that I can use it to create an object url so that I can view the pdf. Any assistance is greatly appreciated!

我不太确定我需要做什么来转换数据，以便我可以使用它来创建对象 url，以便我可以查看 pdf。非常感谢任何帮助！

回答by Rani Radcliff

There is probably an easier way to do this, but this works in IE and Chrome.

可能有一种更简单的方法可以做到这一点，但这适用于 IE 和 Chrome。

1. First, I converted the byte array to base64.
2. Next I converted the base64 to a Uint8Array.
3. Then I display the file.

1. 首先，我将字节数组转换为 base64。
2. 接下来我将 base64 转换为 Uint8Array。
3. 然后我显示文件。

Here is the code that worked for me:

这是对我有用的代码：

    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);
        }

I hope this helps someone else.

我希望这对其他人有帮助。

回答by Simon Schüpbach

Try the following example. it's using FileSaver.

试试下面的例子。它正在使用FileSaver。

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