将字节数组输出转换为Blob会破坏文件

时间:2016-09-14 16:51:08

标签: javascript angularjs api ms-word ms-office

我使用Office Javascript API使用Angular编写Word加载项。

我想通过API检索Word文档,然后将其转换为文件并通过POST上传到服务器。

我使用的代码几乎与Microsoft为此用例提供的文档代码完全相同:https://dev.office.com/reference/add-ins/shared/document.getfileasync#example---get-a-document-in-office-open-xml-compressed-format

服务器端点要求通过多部分表单进行上传,因此我创建了一个FormData对象,在创建$ http调用时,我在该对象上附加文件(blob)以及一些元数据。

该文件正在传输到服务器,但是当我打开它时,它已经损坏,无法再通过Word打开它。

根据文档,Office.context.document.getFileAsync函数返回一个字节数组。但是,生成的fileContent变量是一个字符串。当我在console.log这个字符串时,它似乎是压缩数据,就像它应该的那样。

我的猜测是我需要在将字符串转换为Blob之前进行一些预处理。但是哪个预处理?通过atob的Base64编码似乎没有做任何事情。

                let sendFile = ( fileContent ) => {

                    let blob = new Blob([fileContent], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }),
                        fd = new FormData();

                    blob.lastModifiedDate = new Date();

                    fd.append('file', blob, 'uploaded_file_test403.docx');
                    fd.append('case_id', caseIdReducer.data());

                    $http.post('/file/create', fd, {
                        transformRequest: angular.identity,
                        headers: { 'Content-Type': undefined }
                    })
                    .success( ( ) => {

                        console.log('upload succeeded');

                    })
                    .error(( ) => {
                        console.log('upload failed');
                    });

                };


                function onGotAllSlices(docdataSlices) {

                    let docdata = [];

                    for (let i = 0; i < docdataSlices.length; i++) {
                        docdata = docdata.concat(docdataSlices[i]);
                    }

                    let fileContent = new String();

                    for (let j = 0; j < docdata.length; j++) {
                        fileContent += String.fromCharCode(docdata[j]);
                    }

                    // Now all the file content is stored in 'fileContent' variable,
                    // you can do something with it, such as print, fax...

                    sendFile(fileContent);

                }

                function getSliceAsync(file, nextSlice, sliceCount, gotAllSlices, docdataSlices, slicesReceived) {
                    file.getSliceAsync(nextSlice, (sliceResult) => {

                        if (sliceResult.status === 'succeeded') {
                            if (!gotAllSlices) { // Failed to get all slices, no need to continue.
                                return;
                            }

                            // Got one slice, store it in a temporary array.
                            // (Or you can do something else, such as
                            // send it to a third-party server.)
                            docdataSlices[sliceResult.value.index] = sliceResult.value.data;
                            if (++slicesReceived === sliceCount) {
                                // All slices have been received.
                                file.closeAsync();

                                onGotAllSlices(docdataSlices);

                            } else {
                                getSliceAsync(file, ++nextSlice, sliceCount, gotAllSlices, docdataSlices, slicesReceived);
                            }
                        } else {

                            gotAllSlices = false;
                            file.closeAsync();
                            console.log(`getSliceAsync Error: ${sliceResult.error.message}`);
                        }
                    });
                }

                // User clicks button to start document retrieval from Word and uploading to server process
                ctrl.handleClick = ( ) => {

                    Office.context.document.getFileAsync(Office.FileType.Compressed, { sliceSize: 65536 /*64 KB*/ }, 
                        (result) => {
                            if (result.status === 'succeeded') {

                                // If the getFileAsync call succeeded, then
                                // result.value will return a valid File Object.
                                let myFile = result.value,
                                    sliceCount = myFile.sliceCount,
                                    slicesReceived = 0, gotAllSlices = true, docdataSlices = [];

                                // Get the file slices.
                                getSliceAsync(myFile, 0, sliceCount, gotAllSlices, docdataSlices, slicesReceived);

                            } else {

                                console.log(`Error: ${result.error.message}`);

                            }
                        }
                    );
                };

3 个答案:

答案 0 :(得分:1)

我最终使用fileContent字符串执行此操作:

let bytes = new Uint8Array(fileContent.length);

for (let i = 0; i < bytes.length; i++) {
    bytes[i] = fileContent.charCodeAt(i);
}

然后我继续用这些字节构建Blob:

let blob = new Blob([bytes], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });

如果我通过POST请求发送此文件,则该文件不会受损,并且可以通过Word正确打开。

我仍然觉得这可以用更少的麻烦/更少的步骤来实现。如果有人有更好的解决方案,我会非常有兴趣学习。

答案 1 :(得分:0)

  

PFF!获取File实例而不使用FileReader api有什么问题?来吧微软!

您应该将字节数组放入blob构造函数中,将二进制blob转换为javascript中的字符串是一个坏主意,可能会导致“超出范围”错误或编码不正确

随着这个

做点什么
var byteArray = new Uint8Array(3)
byteArray[0] = 97
byteArray[1] = 98
byteArray[2] = 99
new Blob([byteArray])

如果块是typed arrays的实例或blob / file的实例。在这种情况下,您可以这样做:

blob = new Blob([blob, chunk])

请...不要对它进行base64编码(大约3倍+慢)

答案 2 :(得分:0)

你的回答是,Uint8Array是解决方案。只需稍微改进一下,避免创建字符串:

let bytes = new Uint8Array(docdata.length);
for (var i = 0; i < docdata.length; i++) {
    bytes[i] = docdata[i];
}