FileSaver creates a file with different content than the original

Question

I'm trying to use Blob to create a file from data passed across a server call, encoded in base64. The original file is an Excel spreadsheet 5,507 bytes long. The base64 encoding (with newlines) is 7,441 bytes. Using the command line base64 tool, I'm able to construct an exact copy of the original from the base64 version:

% base64 file.xlsx > file.enc
% base64 -d file.enc > copy.xlsx
% cmp file.xlsx copy.xlsx
% file --mime-type copy.xlsx
copy.xlsx: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

In Typescript, I'm doing:

import * as dld from 'file-saver';

const contentType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
const data = atob(content)
const contentBlob = new Blob([data], { type: contentType });

dld.saveAs(contentBlob);

I've verified that the binary data (the variable data above) at least starts with the same bytes as the binary content of the original file. The file that it's creating is 7,729 bytes long, and has MIME type application/zip instead of the expected 5,507 bytes. What am I missing here? What do I do differently in order to create a client-side copy of the file?

score 0 · Accepted Answer · answered Apr 12 '18 at 18:43

0

When using filesaver we had to initialize the blob from an Uint8Array

const pdfFileName = 'someName' const fileDownload: Blob = new Blob([new Uint8Array(res.body)], { type: contentType }); fileSaver.saveAs(fileDownload, pdfFileName);

answered Apr 12 '18 at 18:43

zmanc

5,201
12
45
90

That almost worked. adding [this answer](https://stackoverflow.com/questions/21797299/convert-base64-string-to-arraybuffer) to yours got it working correctly. – Scott Deerwester Apr 12 '18 at 19:51
1

fantastic! Glad i got you part of the way there. – zmanc Apr 12 '18 at 19:52

FileSaver creates a file with different content than the original

1 Answers1